js怎么修改css属性
时间:2021-04-18 来源:互联网
今天PHP爱好者给大家带来js修改css属性的方法:1、修改style样式,语法“样式表的指定内容.style.属性="值"”;2、修改特定元素节点的style内容,语法“元素对象.style.cssText="样式值"”;3、使用setAttribute()函数。希望对大家有所帮助。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
原生JS修改CSS属性有以下三种方法
修改style样式
通过document.styleSheets[n] // n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到该样式表的css内容,通过style修改特定样式。(此方法比较麻烦,需要清楚指定样式在样式表的顺序)修改特定元素节点的style内容
cssText可以一次性修改多个css属性
style.attrName 修改单个属性 attrName的值通过setAttribute 修改style属性值
HTML代码
<div class="test" style="">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>
CSS代码
.test {
font-size: 30px;
color: blue;
background-color: blueviolet
}
JS代码
var testNode = document.getElementsByClassName("test")[0];
var cssTextBtn = document.getElementsByClassName("cssText")[0];
var attributeBtn = document.getElementsByClassName("setAttribute")[0];
var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
// 1. 修改style样式:
stylesheetBtn.addEventListener('click', function(e) {
var stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].style.backgroundColor = "green";
}, false);
// 2. 修改特定元素节点的style内容
cssTextBtn.addEventListener('click', function(e) {
testNode.style.cssText = "width: 300px; background-color: red; "
testNode.style.border = "1px solid black"
}, true);
// 3. 通过setAttribute 修改style属性值
attributeBtn.addEventListener('click', function(e) {
testNode.setAttribute('style', 'width: 400px; background-color: yellow; ')
}, false)
以上就是js怎么修改css属性的详细内容,更多请关注php爱好者其它相关文章!
-
怎么删除WinPE开始菜单中的程序(winpepge 怎么删除) 2025-06-28
-
PE启动时出现乱码怎么办(pe一直在启动界面) 2025-06-28
-
装机大师pe系统检测cpu核心速度使用教程(pcos装机大师) 2025-06-28
-
一键U盘重装系统进入WinPE时固定U盘盘符的方法(一键重装u盘启动) 2025-06-28
-
电脑无法进入到winPE系统中怎么办?(电脑无法进入到u盘系统) 2025-06-28
-
如何判断自己的电脑是否支持uefi启动模式?(如何判断自己的幸运色) 2025-06-28