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

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

相关文章
|
19天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
24 7
|
2天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
8 1
|
2天前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
5 1
|
5天前
|
XML JavaScript 前端开发
如何在JavaScript中设置多个样式属性?
【6月更文挑战第29天】如何在JavaScript中设置多个样式属性?
23 3
|
6天前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
12 1
|
7天前
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
13 1
|
12天前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
49 2
|
15天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
20天前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
22天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
16 2