精华内容
下载资源
问答
  • JSS Javascript样式表
  • 因为它让我疯狂地在我的 CSS 文件中定义一些样式以及需要在我的 JavaScript 文件中计算的一些其他样式。 将所有声明集中在一处让我 100% 更快乐。 不必键入花括号、冒号和分号也不是令人不快的。 表现 jscss大约需要...
  • JSS - Javascript 样式表 介绍 JSS 是一个 javascript 框架,它与 CSS 一起工作。 遵循其他框架(如 SASS 和 LESS)已经成功的模型,JSS 还带来了替代方案,以赋予 CSS 更大的力量。 微分 JSS 与其他框架的最大区别...
  • 内容索引:脚本资源,Ajax/JavaScript,样式,切换风格 JS样式表切换实例,即时更换网站风格,我想大家都见过这种功能吧,Discuz论坛就有。在本例子中,鼠标点击下边不同的样式表,页面会适时变幻为你所选择的样式,无...
  • JavaScript 样式表 - JS3 它不是将编程放在 CSS 中,而是将 CSS 放在编程语言中。 介绍 随着越来越多的发展向客户端移动,不同的机会正在开放,传统的做事方式正在发生巨大的变化。 CSS 定义就是这样一种情况。 ...
  • js 样式表入门基础及简单操作

    千次阅读 2020-12-04 14:52:49
    样式表核心成员及关系表 数据 数据类型 注释 document.styleSheets StyleSheetList 相当于 style 标签的集合 document.styleSheets[0] CSSStyleSheet CSSStyleSheet 继承自 StyleSheet 相当于某个 style ...

    样式表核心成员及关系表

    数据数据类型注释
    document.styleSheetsStyleSheetList相当于 style 标签的集合
    document.styleSheets[0]CSSStyleSheetCSSStyleSheet 继承自 StyleSheet
    相当于某个 style 标签; 也就是传说中的[样式表]
    document.styleSheets[0].cssRulesCSSRuleList相当于某个 style 标签的规则的集合
    document.styleSheets[0].cssRules0CSSImportRule这里只能取到 [@import url()] 的文本内容, 并不能取到规则内容
    document.styleSheets[0].cssRules[0].styleSheetCSSStyleSheet@import 的情况, 下一层 styleSheet 又是 CSSStyleSheet 类型; @import 只对应一个样式表, 所以 styleSheet 没有 s, 也不用指定下标
    document.styleSheets[0].cssRules1CSSStyleRuleCSSStyleRule 继承自 CSSRule
    相当于某个 style 标签的某条规则; 一个 @import 或者一对{}对应的内容
    document.styleSheets[0].cssRules[1].cssTextString第0个样式表的第1条规则的文本;cssText 是只读, 没有修改功能
    document.styleSheets[0].cssRules[0].styleCSSStyleDeclaration数字下标的是"非初始值"的完整属性名(outline 会被拆分成 color, style, width)
    document.styleSheets[0].cssRules[0].style.属性名String用属性名可以直接取到属性值;在style可以修改样式



    CSSStyleSheet 对象

    方法/属性说明语法
    cssRules返回一个实时的 CSSRuleList,其中包含组成样式表的 CSSRule 对象的一个最新列表
    ownerRule如果一个样式表示通过@import 规则引入文档,那么 ownerRule 属性会返回相应的CSSImportRule对象,否则返回 null这个方法还是草案, 不知道怎么用
    insertRule(rule [, index])向样式表的特定位置插入一条新规则,需要提供新规则的完整文本rule: 规则; index: 位置(默认最前);
    deleteRule(index)从样式表中删除特定位置的一条规则index: 位置;
    rules跟 cssRules 功能用法相同; 过时方法
    addRule(selector, styleBlock, index)跟 insertRule() 功能相似, 用法不同; 过时方法selector: 选择器; styleBlock: 规则正文; index: 位置(默认最后);
    removeRule(index)跟 deleteRule() 功能用法相同; 过时方法index: 位置;

    注意:尽管 insertRule 等几个方法是 CSSStyleSheet 的一个方法,但它实际插入的地方是 CSSStyleSheet.cssRules 的内部 CSSRuleList




    StyleSheet 对象

    方法/属性说明
    disabled返回Boolean表示当前样式表是否可用
    href返回 DOMString 表示样式表的位置
    media返回 MediaList 表示样式的预期目标媒体
    ownerNode返回 Node 将此样式表与当前文档相关联
    parentStyleSheet返回 StyleSheet 如果有的话; 返回 null 如果没有
    title返回 DOMString 表示当前样式表的顾问标题
    type返回 DOMString 表示当前样式表的语言

    demo 中的表格同以上表格
    demo 主要目的是示范用 javascript 控制样式表

    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<meta charset="utf-8">
    	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    	<title>js 样式表入门基础及简单操作</title>
    	<link rel="stylesheet" href="./css/outsideStyle.css">
    	<style>
    		@import url("./css/outsideStyle.css");
    
    		* {
    			outline: 1px red solid;
    		}
    
    		#box1 {
    			font-size: 30px;
    		}
    
    		p {
    			font-size: 20px;
    			height: 100px;
    			width: 300px;
    		}
    
    		#box2 ::after {
    			display: block;
    			outline: 1px green solid;
    			height: 50px;
    			content: "attr()";
    			font-size: 12px;
    		}
    	</style>
    	<style>
    		#box3 {
    			color: red;
    		}
    	</style>
    </head>
    
    <body>
    
    	<h1>样式表核心成员及关系表</h1>
    	<table>
    		<tr>
    			<th>数据</th>
    			<th>数据类型</th>
    			<th>注释</th>
    		</tr>
    		<tr>
    			<td>document.styleSheets</td>
    			<td>StyleSheetList</td>
    			<td>相当于 style 标签的集合</td>
    		</tr>
    		<tr>
    			<td>document.styleSheets[0]</td>
    			<td>CSSStyleSheet</td>
    			<td>
    				<div>CSSStyleSheet 继承自 StyleSheet</div>
    				<div>相当于某个 style 标签; 也就是传说中的[样式表]</div>
    			</td>
    		</tr>
    		<tr>
    			<td>document.styleSheets[0].cssRules</td>
    			<td>CSSRuleList</td>
    			<td>相当于某个 style 标签的规则的集合</td>
    		</tr>
    		<tr>
    			<td>document.styleSheets[0].cssRules[0](@import)</td>
    			<td>CSSImportRule</td>
    			<td>这里只能取到 [@import url()] 的文本内容, 并不能取到规则内容</td>
    		</tr>
    		<tr>
    			<td>document.styleSheets[0].cssRules[0].styleSheet</td>
    			<td>CSSStyleSheet</td>
    			<td>@import 的情况, 下一层 styleSheet 又是 CSSStyleSheet 类型; @import 只对应一个样式表, 所以 styleSheet 没有 s, 也不用指定下标</td>
    		</tr>
    		<tr>
    			<td>document.styleSheets[0].cssRules[1](常规的{})</td>
    			<td>CSSStyleRule</td>
    			<td>
    				<div>CSSStyleRule 继承自 CSSRule</div>
    				<div>相当于某个 style 标签的某条规则; 一个 @import 或者一对{}对应的内容</div>
    			</td>
    		</tr>
    		<tr>
    			<td>document.styleSheets[0].cssRules[1].cssText</td>
    			<td>String</td>
    			<td>第0个样式表的第1条规则的文本;cssText 是只读, 没有修改功能</td>
    		</tr>
    		<tr>
    			<td>document.styleSheets[0].cssRules[0].style</td>
    			<td>CSSStyleDeclaration</td>
    			<td>数字下标的是"非初始值"的完整属性名(outline 会被拆分成 color, style, width)</td>
    		</tr>
    		<tr>
    			<td>document.styleSheets[0].cssRules[0].style.属性名</td>
    			<td>String</td>
    			<td>用属性名可以直接取到属性值;在style可以修改样式</td>
    		</tr>
    	</table>
    
    	<h1>CSSStyleSheet 对象</h1>
    	<table>
    		<tr>
    			<th>方法/属性</th>
    			<th>说明</th>
    			<th>语法</th>
    		</tr>
    		<tr>
    			<td>cssRules</td>
    			<td>返回一个实时的 CSSRuleList,其中包含组成样式表的 CSSRule 对象的一个最新列表</td>
    			<td></td>
    		</tr>
    		<tr>
    			<td>ownerRule</td>
    			<td>如果一个样式表示通过@import 规则引入文档,那么 ownerRule 属性会返回相应的CSSImportRule对象,否则返回 null</td>
    			<td>这个方法还是草案, 不知道怎么用</td>
    		</tr>
    		<tr>
    			<td>insertRule(rule [, index])</td>
    			<td>向样式表的特定位置插入一条新规则,需要提供新规则的完整文本</td>
    			<td>rule: 规则; index: 位置(默认最前);</td>
    		</tr>
    		<tr>
    			<td>deleteRule(index)</td>
    			<td>从样式表中删除特定位置的一条规则</td>
    			<td>index: 位置;</td>
    		</tr>
    		<tr>
    			<td>rules</td>
    			<td>跟 cssRules 功能用法相同; 过时方法</td>
    			<td></td>
    		</tr>
    		<tr>
    			<td>addRule(selector, styleBlock, index)</td>
    			<td>跟 insertRule() 功能相似, 用法不同; 过时方法</td>
    			<td>selector: 选择器; styleBlock: 规则正文; index: 位置(默认最后);</td>
    		</tr>
    		<tr>
    			<td>removeRule(index)</td>
    			<td>跟 deleteRule() 功能用法相同; 过时方法</td>
    			<td>index: 位置;</td>
    		</tr>
    	</table>
    	<div>注意:尽管 insertRule 等几个方法是 CSSStyleSheet 的一个方法,但它实际插入的地方是 CSSStyleSheet.cssRules 的内部 CSSRuleList。</div>
    
    	<h1>StyleSheet 对象</h1>
    	<table>
    		<tr>
    			<th>方法/属性</th>
    			<th>说明</th>
    		</tr>
    		<tr>
    			<td>disabled</td>
    			<td>返回Boolean表示当前样式表是否可用</td>
    		</tr>
    		<tr>
    			<td>href</td>
    			<td>返回 DOMString 表示样式表的位置</td>
    		</tr>
    		<tr>
    			<td>media</td>
    			<td>返回 MediaList 表示样式的预期目标媒体</td>
    		</tr>
    		<tr>
    			<td>ownerNode</td>
    			<td>返回 Node 将此样式表与当前文档相关联</td>
    		</tr>
    		<tr>
    			<td>parentStyleSheet</td>
    			<td>返回 StyleSheet 如果有的话; 返回 null 如果没有</td>
    		</tr>
    		<tr>
    			<td>title</td>
    			<td>返回 DOMString 表示当前样式表的顾问标题</td>
    		</tr>
    		<tr>
    			<td>type</td>
    			<td>返回 DOMString 表示当前样式表的语言</td>
    		</tr>
    	</table>
    
    	<script type="text/javascript">
    		"use strict"
    
    		window.onload = function (params) {
    
    			console.log(document.styleSheets)
    			console.log(document.styleSheets[0])
    			console.log(document.styleSheets[1].cssRules)
    			console.log(document.styleSheets[0].cssRules[0])
    			console.log(document.styleSheets[0].cssRules[0].cssText)
    
    			document.styleSheets[1].insertRule("#swq{color:#000}", 1)
    			document.styleSheets[1].addRule("#swq", "color:#000", 1)
    			document.styleSheets[1].deleteRule(0)
    			document.styleSheets[1].removeRule(0)
    
    		}
    	</script>
    </body>
    
    </html>
    

    参考资料:
    styleSheet;
    StyleSheet - Web API 接口参考 | MDN;
    CSSStyleSheet - Web API 接口参考 | MDN;
    Document.styleSheets - Web API 接口参考 | MDN;

    end

    展开全文
  • I need to pass these variables from MySQL to a LESS.js stylesheet via PHP. Possible?</p> <p>If not, any advice on a way to do something similar? The lighten and darken variables are key. </div>
  • Javascript访问样式表--又一篇好
  • 使用 JavaScript 构建样式表。 为什么 使用 JavaScript(例如 )构建标记时,内联样式更具声明性。 但是内联样式也可能非常有限(没有伪元素或任何高级选择器)。 如何 这个库允许你使用 JavaScript 对象定义你的...
  • 主要介绍了JavaScript动态加载样式表的方法,涉及javascript操作样式表的技巧,非常具有实用价值,需要的朋友可以参考下
  • 0.前言继续上面的内容,来聊聊内部样式表与外部样式表的读写。老规矩,“小二,给大爷上代码!!!”内部样式表与外部样式表的读写#box1{width:100px;height: 200px;}//获取元素节点var jsDiv1 = document....

    0.前言

    继续上面的内容,来聊聊内部样式表与外部样式表的读写。老规矩,“小二,给大爷上代码!!!”

    内部样式表与外部样式表的读写

    #box1{

    width:100px;height: 200px;

    }

    //获取元素节点

    var jsDiv1 = document.getElementById("box1");

    var jsDiv2 = document.getElementById("box2");

    效果:

    bb03a36721df

    捕获.PNG

    1.正文

    从上面代码可以看到用href="sunck.css"添加外部样式表,用

    要知道前端有“三毒”——IE/6/7/8。因此要考虑IE浏览器的情况,我在此分为两个部分:

    (1)在IE浏览器中的情况:

    公式:①元素节点.currentStyle.样式属性名

    ②元素节点.currentStyle[样式属性名]

    //内部样式

    //IE

    if (jsDiv1.currentStyle) {

    console.log(jsDiv1.currentStyle.width);

    console.log(jsDiv1.currentStyle["width"]);

    }

    //外部样式

    if (jsDiv2.currentStyle) {

    console.log(jsDiv2.currentStyle.width);

    }

    上面是在IE浏览器中要使用的特定方法,但是在其他浏览器我们要用什么方法呢?

    (2)其他浏览器中的情况:

    公式:①window.getComputedStyle(元素节点, 伪类).样式属性名

    ②window.getComputedStyle(元素节点, 伪类)[样式属性名]

    注意:伪类一般写null

    //内部样式

    if{

    console.log(window.getComputedStyle(jsDiv1, null).width);

    console.log(window.getComputedStyle(jsDiv1, null)["width"]);

    }

    // 外部样式

    if{

    console.log(window.getComputedStyle(jsDiv2, null).width);

    }

    但是getComputedStyle和currentStyle的有何区别呢?

    bb03a36721df

    getComputedStyle与style的区别.png

    (3)改变内部或者外部样式

    公式:元素节点.style.样式属性名 = 新的属性值,这是通用公式

    jsDiv1.style.height = "300px";

    jsDiv2.style.width = "10px";

    jsDiv1.style.backgroundColor = "red";

    好了,至于运算结果就不一一展示了,自己运行一下,能够加深印象。

    2.总结

    内部与外部就这点知识点,希望对大家有所帮助,谢谢!!!

    展开全文
  • 主要介绍了使用JavaScript创建新样式表和新样式规则的相关资料,需要的朋友可以参考下
  • 在web页面中,我们经常需要通过修改样式(style)来达到更好的用户体验,需要的朋友可以参考下。
  • JS 控制CSS样式表

    2020-10-29 18:43:51
    JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果.
  • javascript 动态修改样式和层叠样式表代码,需要的朋友可以参考下。
  • 原生js动态添加样式表

    千次阅读 2018-05-04 15:59:59
    原生js给html动态添加样式表:1.创建标签&lt;style&gt;添加一张内置样式表 var style1 = document.createElement('style'); style1.innerHTML = 'body{color:red}#top:hover{background-color: red;color:...

    原生js给html动态添加样式表:

    
    
    1.创建标签<style>添加一张内置样式表
                var style1 = document.createElement('style');
                style1.innerHTML = 'body{color:red}#top:hover{background-color: red;color: white;}';
                document.head.appendChild(style1);
    2.另一种是添加外部样式表,即在文档中添加一个link节点,然后将href属性指向外部样式表的URL
                var link1 = document.createElement('link');
                link1.setAttribute('rel', 'stylesheet');
                link1.setAttribute('type', 'text/css');
                link1.setAttribute('href', 'reset-min.css');
                document.head.appendChild(link1);

    展开全文
  • 如何用JavaScript实现动态修改CSS样式表?下面小编就为大家带来一篇JavaScript实现动态修改CSS样式表的方法。希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了javascript实现根据iphone屏幕方向调用不同样式表的方法,涉及javascript针对样式表动态操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
  • JS获取外部样式表中的样式

    首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的。教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈~我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转到教程

                   

    用document.getElementById(‘element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了。

    兼容性处理

    解决方案:

    处理IE,引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的!

    通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top

    要兼容FF,就得需要getComputedStyle 出马了!

    1
    2
    3
    4
    5
    <style>
    #a{
          width : 300px ;
    }
    </style>

    则:

    1
    2
    3
    4
    5
    6
    7
    8
    var a = document.getElementById( 'a' );
    if (typeof a.currentStyle!='undefine') {//FF
           var  width = a.currentStyle[ 'width' ];
           alert( 'ie:'  + width);
    } else  if (typeof window.getComputedStyle!='undefine') {//IE
           var  width = window.getComputedStyle(a, null )[ 'width' ];
           alert( 'firefox:'  + width);
    }
               

    浏览人工智能教程

    展开全文
  • PAGE / NUMPAGES 用js动态改变css样式表 用setAttribute方法实现一个页面两份样式表的效果具体方法如下 第一步在连接样式表的元素里定义一个id,例如 <link href="1.css" rel="stylesheet" type="text/css" id="css> ...
  • 用于按需加载 javascript样式表和标记的 Javascript 库。 基于确保库,但重写并提高了与现代设备和浏览器的兼容性。 在 IE6、IE7、IE8、IE9、Safari、Chrome、Firefox、Opera 上测试。 requireOnce 试图解决的...
  • javascript实现的样式表(CSS) 格式整理与压缩,可以分为多行与单行,非常不错。
  • Jquery switcher样式表切换插件css样式表切换实现 Jquery switcher样式表切换插件css样式表切换实现

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 160,138
精华内容 64,055
关键字:

js样式表