JS 修改元素属性的六种方式

方式一、

1.setAttribute
    描述：设置元素的【属性】
    语法：元素名.setAttribute('属性','属性值');
    例子：
        box.setAttribute('style','background-color:red;height:400px');
        注意：设置的是行内样式
2.getAttribute
    描述：获取属性值
    语法：元素名.getAttribute('属性名')；
    例子：
        console.log(box.getAttribute('style'));//background-color:red;height:300px
    注意：
         只能获取行内样式
3.removeAttribute()
    描述：删除一个属性
    语法：元素名.removeAttribute('属性名');
    例子：
        box.removeAttribute('style');

==================================================================

方式二、

2.1直接通过元素节点的style对象修改

  2.1.1获取css样式
   语法：元素名.style.样式名
   例子：console.log(box.style.backgroundColor);//red

  2.1.2设置css样式
    语法：元素名.style.样式名
    例子：
        var box = document.querySelector('.box');
        box.style.height=300+'px';
        box.style.width=300+'px';
        box.style.backgroundColor='red';
        box.style.cssFloat = 'left';

    注意：
       1.只能操作行内样式
       2.当设置的样式含有单位时 则必须+单位
       3.如果样式是js中的关键字 则需要在样式前+css
       4.如果样式由下划线连接 则需要去掉下划线将后面的单词首字母变为大写

 2.1.3清除样式
     语法：元素名.style=''
     例子：
         box.style='';//null 都可以的

==================================================================

方式三

3.1设置样式
     语法：通过元素名.style.cssText;
     例子：
      box.style.cssText='background-color:red;height:300px;width:300px';
3.2获取样式
    语法：元素名.style.cssText
     console.log(box.style.cssText);//background-color: red; height: 300px; width: 300px;
3.3清除样式
    语法：元素名.style.cssText = '';
    例子：box.style=null;
    注意：只能读写行内样式

==================================================================

方式四、

4.1设置样式
    语法：通过元素名.style.setProperty();
    例子：
       box.style.setProperty('background-color','red');
       box.style.setProperty('height','100px');

4.2获取样式值
    语法：元素名.style.getPropertyValue('样式名')
      console.log(box.style.getPropertyValue('width'));

4.3清除样式
   语法：元素名.style.removeProperty('样式名');
     box.style.removeProperty('height');

==================================================================

方式五、关联内部样式/外部样式

1.1setAttribute('属性名'，'属性值')
    描述：关联内部样式
    语法：setAttribute('属性名'，'属性值');
     注意：
       1.可以追加自定义属性的
         div.setAttribute('a','box');
       2.多次对一个属性设置值 则最后一次生效
         var div = document.querySelector('div');
         div.setAttribute('class','a');
         div.setAttribute('class','box');
 1.2removeAttribute  删除【属性】
     div.removeAttribute('class');
    例子：
         var div = document.querySelector('div');
         div.setAttribute('class','a');
         div.setAttribute('class','box');
         div.removeAttribute('class');

==================================================================

方式六、关联内部样式/外部样式

扫描二维码关注公众号，回复： 5774363 查看本文章

1 className
   描述：设置元素的类及其值
   语法：元素名.className
   例子：
       var div = document.querySelector('div');
       div.className = 'box';
   注意：当一个属性多次被赋值则最后一次赋值有效
       div.className = 'a';
       div.className = 'box';//有效

2清除类名
    div.className='';

JS 修改元素属性的六种方式

猜你喜欢