JS 修改元素属性的六种方式 |
您所在的位置：网站首页 › js中flag属性 › 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');================================================================== 方式六、关联内部样式/外部样式 1 className 描述：设置元素的类及其值 语法：元素名.className 例子： var div = document.querySelector('div'); div.className = 'box'; 注意：当一个属性多次被赋值则最后一次赋值有效 div.className = 'a'; div.className = 'box';//有效 2清除类名 div.className='';
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |