关于手动添加属性的方法总结

在开发过程中，会常遇到一种场景，是需要点击一下动态添加一个class或者id，

最近在复习js基础，总结了3个方法：

（1）3个步骤

var arr=document.createAttribute('class');（创建class）
arr.value="demo";（赋值）
top_.setAttributeNode(arr);（在元素中添加set进去）

（2）一步到位

top_.setAttribute("id","sex");

（3）直接赋值

sec.className="one";
sec.id="two";

以上三个都可以后期动态的在html页面上添加新的属性

移除：sec.removeAttribute('id');（直接写入你要移除的属性名）

var top_=document.getElementById("top"); （用getElementById（）方法，获取元素时，声明的变量名不能与id名一样）
var top__=document.querySelector('#top');（获取元素为id时，声明的变量名不能与id名一样）

动态加行内css样式：

1、wrap_.style="height:200px;width:300px;background:lightblue;"（直接style样式）

2、wrap_.style.cssText="font-size: 20px;";//添加的内容会把原来的行内样式清除掉（最新更新，1比2兼容性更强，1不兼容低版本浏览器，建议使用2）

3、wrap_.style.cssText+=";font-size: 20px;";//为了解决上面的问题，把“=”改为“+=”,为了兼容ie，在添加的属性的前面加上“；”；

 

Jquery添加css样式

1.  $('li').css('background-color', 'red');  (添加一个样式)

2.  $('div').css({"background":"yellow","width":"50px","height":"50px"});（同时添加多个样式）

js如何获得标签上面的属性

.getAttribute（‘属性名’）