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

2024-01-30 08:56| 来源: 网络整理| 查看: 265

方式一、

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');

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

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

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

【本文地址】

公司简介

联系我们