javascript_操作样式

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/62046940

styleSheets

用styleSheets获取样式集合(包括link中的和style中的,都兼容)

var sheet = document.styleSheets // 获取样式集合

    var data = document.styleSheets;        // 返回一个样式表集合
    var rules = data[0].cssRules;           // 返回第一个样式中的规则集合
    alert(data.length);                     // 2 获取样式表的数量
    alert(rules.length);                    // 2 获取样式表中规则的数量    

disabled 禁用指定样式表(true表示禁用样式)

    var data = document.styleSheets[0];     // 获取第一个样式表
    data.disabled = true;                   // 禁用第一个样式表

href 获取样式的URL

document.write(data.href);
效果:  <i><b>file:///D:/Code/HTML/JavaScript/CSS/js_style.css</b></i>

cssRules 样式表规则集合(IE用rules)

只能获得style标签中的样式

cssRules.cssText 获得css文本
selectorText 获得选择符

    var data = document.styleSheets;    // 获取样式集合
    var rules = data[0].cssRules;       // 获取规则集合
    alert(rules.length);                // 获取规则数量
    alert(rules[0].cssText);            // 获取第一条规则的css代码
    alert(rules[0].selectorText);       // 获取第一条规则的选择器名

添加和删除规则

deleteRule(num) 删除第num条规则(IE用removeRule)
insertRule(“样式”,num) 插入样式(IE 用addRule(“标签”,”样式”,num))


var data = document.styleSheets[0];
data.deleteRule(0); // 删除样式
data.insertRule("body{background-color:red;}",0); // 添加样式

style

    var data = document.styleSheets[0];
    var rules = data.cssRules;
    alert(rules[0].style.backgroundColor);  //orange
    rules[0].style.backgroundColor = "blue";    // 更改背景色为blue

这一部分内容有很多的兼容性问题,以后再做研究

相关文章
|
6天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
6天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
13 3
|
6天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
16 0
|
6天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
11 2
|
6天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
12 3
|
6天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
14 0
|
6天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
17 0
|
6天前
|
JavaScript 前端开发 索引
js操作字符串的方法
js操作字符串的方法
16 2
|
6天前
|
存储 缓存 JavaScript
【Web 前端】JS哪些操作会造成内存泄露?
【4月更文挑战第22天】【Web 前端】JS哪些操作会造成内存泄露?
|
6天前
|
JavaScript 前端开发
js操作字符串的相关方法
js操作字符串的相关方法
14 3