JS 如何修改 CSS 属性? 下面本篇文章就来给大家介绍一下使用 JavaScript 修改 CSS 属性的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
1, 修改 style 样式:
通过 document.styleSheets[n] // n 表示期望修改的样式表序号, 从 0 开始计数来获取到期望修改的样式表, 通过 cssRules[0] 获取到该样式表的 CSS 内容, 通过 style 修改特定样式;
2, 修改特定元素节点的 style 内容
cssText 可以一次性修改多个 CSS 属性
style.attrName 修改单个属性 attrName 的值
3, 通过 setAttribute 修改 style 属性值
- <style>
- .test {
- font-size: 30px;
- color: blue;
- background-color: blueviolet
- }
- </style>
- // html
- <div class="test" style="height: 100px;">
- TEST
- </div>
- <button class="cssText">cssText</button>
- <button class="setAttribute">setAttribute</button>
- <button class="stylesheet">stylesheet </button>
- // 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; height: 200px;"
- testNode.style.border = "1px solid black"
- }, true);
- // 3. 通过 setAttribute 修改 style 属性值
- attributeBtn.addEventListener('click', function(e) {
- testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
- }, false)
推荐学习: JavaScript 视频教程 https://www.html.cn/js/javascript/video/ !!
来源: http://www.css88.com/qa/javascript/15055.html