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

在开发过程中,会常遇到一种场景,是需要点击一下动态添加一个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;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(‘属性名’)

原文地址:https://www.cnblogs.com/xumqfaith/p/7126887.html