JavaScript(二)

属性、样式操作

改变元素样式的方式:外部样式表、内部样式表、行内样式。

获取元素的显示样式

获取节点的方式:

通过id获取:document.getElementById()
通过选择器来获取:document.querySelector(),document.querySelectorAll()
通过class名字获取:document.getElementsByClassName()
通过标签名获取:document.getElementsByTagName()
通过name获取:document.getElementsByName()

用classList来操作类名

添加类名: .classList.add()

移除类名: .classList.remove()
切换类名(有则移除,没有则添加): .classList.toggle()
let oWrap = document.getElementById("wrap");

    //不标准的写法
    // oWrap.style = "width: 300px";

    //style 这个合法的标签属性很特殊
    console.log( oWrap.style );

    oWrap.style.width = "300px";
    oWrap.style.height = "200px";
    oWrap.style.backgroundColor = "red";

//样式操作
let oWrap = document.getElementById("wrap");

    oWrap.onclick = function(){
      // oWrap.style.width = "500px";

      //在事件函数里面,可以用 this来代替oWrap
      this.style.width = "500px";
    };
//变相操作样式
let oWrap = document.getElementById("wrap");

    oWrap.onclick = function(){
      //添加名字,点击时,更换名字生成样式
      this.className = "fly";
    };
 
(0)

相关推荐

  • javascript模块化开发(二)

    模块化开发(一) ES6模块化 详解 ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict". 顶层的this指向undefined,即不应该在顶层代码 ...

  • JavaScript入门-对象(二)

    JavaScript对象(二) 本篇,主要讲了面向对象.this的指向问题,模拟继承过程 面向对象编程 什么面向对象编程? 编程,编程就是人们用计算机能懂的语言,告诉计算机自己想做的事情. 面向对象的 ...

  • JavaScript入门-函数function(二)

    JavaScript入门-函数function(二) 递归函数 什么是递归函数? 递归简单理解就是,在函数体里,调用自己. //我们在求一个10的阶乘的时候,可能会这么做 //写一个循环 var to ...

  • JavaScript数组 - 二维数组

    JavaScript二维数组 什么是二维数组? 注意:所谓的二维数组,就是在数组中元素还为数组,如果再有数组也可称为三维数组 我们通过一个例题来进行讲解 通过循环按执行顺序为一个5x5的二维数组a赋1 ...

  • JavaScript 基础二

    函数 函数:函数就是封装了一段可以重复执行的代码块. function fn(){ console.log('我是函数') } fn(); function getSum(a,b){ return a ...

  • 求索与探疑:中国音乐史学发展的动力(二)——陈聆群、陈应时二位先生于学科建设的功绩和感怀

    作者:洛 秦 内容提要 陈聆群.陈应时教授是我的老师和同事,提携和指引我走上学术道路.与二位先生学术共事的30多年经历,让我更清晰地看到他们对中国音乐史学的发展所作出的贡献.陈聆群先生是一位中国近现代 ...

  • 读懂十二时辰,就懂了我们的一生

    十二时辰是古人根据一日间太阳出没的自然规律.天色的变化以及自己日常的生产活动.生活习惯而归纳总结.独创于世的.十二时辰制,西周时就已使用.古人把一昼夜划分成十二个时段,每一个时段叫一个时辰.十二时辰既 ...

  • 44张照片,告诉你二战前世界的样子

    1939年,轴心国与同盟国宣布开战,此前的几年间,全球的人们陷于疯狂与骚动之中,这也成了大战爆发的前奏. 第二次中日战争期间的1937年,一名日本兵在守卫一段占据的中国长城(国会图书馆). 自1931 ...

  • 食道癌饮食不下-噎启膈通二味小方之效

    噎启膈通--给食道癌临床治疗提供了一个很好的思路. 高龄老人食道癌,虑其年已八旬,施以手术恐体弱无法承受,初行放疗数次亦不堪受,转求中医诊治.一小方:灵芝.威灵仙,二药等量,煎汤代茶,频频呷服,以期暂 ...