abc.css
CSS code
.class1
{
width:10px;
background-color: red;
}
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="abc.css" />
<TITLE> New Document </TITLE>
<script>
window.onload=fnInit;
function fnInit(){
// 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.backgroundColor="#0000FF";
}
</script>
</HEAD>
<BODY>
<div class="class1">aaa</div>
</BODY>
</HTML>
(2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:399px;
height:195px;
z-index:1;
border:1px solid #000;
background-color:#CCCCCC;
}
-->
</style>
<script>
window.onload = function(){
alert(document.getElementById('apDiv1').currentStyle.width)
}
</script>
</HEAD>
<BODY>
<div id="apDiv1">aaa</div>
</BODY>
</HTML>
还可以用 document.styleSheets(i).href 可以知道当前页面中引用的每个css的文件!
另:CSS属性与JavaScript编码对照表
(一定要注意, 上次本人_何向阳,在使用js修改css的中margin-left属性时,总报"left"未定义,后来,找了好多资料,才发现在js中,margin-left的写法为:marginLeft,恍然大悟,希望遇到相同问题的朋友,谨慎对待。)
CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。
比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:JavaScript中style后面的属性应该是什么?
<script type="text/javascript">
function imageOver(e) {
e.style.border="1px solid red";
}
function imageOut(e) {
e.style.borderWidth=0;
}
</script>
<img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript CSS Style属性对照表
盒子标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
颜色和背景标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
文字样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
文本标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign
obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="..."),看一下代码
XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS获取CSS属性值</title>
<style type="text/css">
<!--
.ss{color:#cdcdcd;}
-->
</style>
</head>
<body>
<div id="css88" class="ss" style="width:200px; height:200px; background:#333333">JS获取CSS属性值</div>
<script type="text/javascript">
alert(document.getElementById("css88").style.width);//200px
alert(document.getElementById("css88").style.color);//空白
</script>
</body>
</html>
上面这个例子对id为"css88"的div设置了2种烦事的样式,包括style和外部样式class。
从alert出来的信息可以看到,document.getElementById("css88").style方法获取不到class为ss的属性和值。
那么这么样才能获取到class为ss的属性和值呢?
IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。
网上一个比较方法是:
XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>S获取CSS属性值</title>
<style type="text/css">
<!--
.ss{background:blue; color:#cdcdcd; width:200px}
-->
</style>
</head>
<body>
<p id="qq" class="ss" >sdf</p>
<script type="text/javascript">
function GetCurrentStyle (obj, prop) {
if (obj.currentStyle) {
return obj.currentStyle[prop];
}
else if (window.getComputedStyle) {
propprop = prop.replace (/([A-Z])/g, "-$1");
propprop = prop.toLowerCase ();
return document.defaultView.getComputedStyle (obj,null)[prop];
}
return null;
}
var dd=document.getElementById("qq");
alert(GetCurrentStyle(dd,"width"));
</script>
</body>
</html>
当然,如果您是引用外部的css文件同样适用。
另:可以将上面的方法简化为
JavaScript代码
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
相关推荐
使用babel宏在构建时将CSS转换为React Native样式表
这使您可以编写包含JavaScript插件支持的样式CSS样式表。 安装 该项目以Node格式的模块提供。 安装qaffeine的最简单方法是通过npm: npm install qaffeine 插件使用 Qaffeine作为CommonJS模块分发,可以与Node...
css-to-react-native-transform 之上的轻量级包装器,允许将有效的 CSS 转换为 React Native 样式表对象。 为了简单.myClass {} ,它只转换类选择器(例如.myClass {} )和分组类选择器(例如.myClass, ....
用法 插入jscss.js : < script src = jscss.js > </ script > 使用以下奇特的语法在 JavaScript 中编写样式: style ( ` body background #ccc ... box-shadow 0 1px 2px ...jscss大约需要0.03s来解析
样式导入极其轻巧CSS解析器,用于从样式表中窃取规则(无需将样式表添加到捆绑包中),以组合成或您可能在JS中使用CSS的任何其他地方。动机在实施其他CSS解决方案时,与全局或第三方CSS一起工作会带来不断的挑战。 ...
该模块打开提供的URL并运行解析器脚本,该脚本返回包含关键样式规则的样式表。 可以在回调函数中对此进行进一步处理。 当解析器脚本注入并在运行时,操作不仅限于检查单个样式表。 自动化选项 Grunt插件使用此模块...
DSS ,文档样式表是CSS,LESS,STYLUS,SASS和SCSS代码的注释指南和解析器。 该项目执行静态文件分析和解析,以生成用于生成样式指南的对象。目录解析文件在大多数情况下,您将希望在构建步骤中包含DSS解析器,该...
CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。 JavaScript 是 Web 的编程语言。所有现代的...
postcss-doitrigger 解析样式表并生成声明列表,这些声明将触发布局,绘制或合成。 使用来自数据。用法var fs = require ( 'fs' ) ;var postcss = require ( 'postcss' ) ;var doitrigger = require ( 'postcss-...
Inliner仅解析HTML文档中定义CSS,不获取外部样式表douceur Golang中的简单CSS解析器和inliner。 语法分析器受到CSS语法模块3级和相应的JS语法分析器的模糊启发。 Inliner仅解析HTML文档中定义CSS,它不获取外部样式...
CSS:Cascading Style Sheets,层叠样式表,控制如何显示 HTML 元素 JavaScript,一种脚本语言,脚本代码无需编译,在浏览器或 JS 容器可以直接解释执行 页面中 HTML 定义结构 CSS 控制显示样式 JavaScript 给...
Ascii 样式表 在屏幕上显示与 80 年代一模一样的字符 可以在这里看到一个演示: 使用 nodejs 安装 要安装应用程序,请从安装 nodejs,然后从命令行调用“npm install”来安装所有依赖项,并从 Web 浏览器调用索引...
这是基于强大CSS解析器的新JavaScript版本。 1.安装 全局安装(用作命令行工具): npm install csscomb -g 本地安装(用作当前目录中的命令行工具): npm install csscomb 要将其安装为项目依赖项(该软件包...
-也称为SSS,它为CSS-in-JS解决方案提供了类型安全的结构化样式表格式。 提供本地和全局范围的解析器。 -低级API,使用原子类名称和CSS变量将CSS声明呈现到DOM中,以实现高性能,低文件大小和高效的缓存。 还支持...
结构化样式表 - 也称为 SSS,它为 CSS-in-JS 解决方案提供类型安全的结构化样式表格式。 为本地和全局范围提供解析器。 样式引擎 - 低级 API,使用原子类名称和 CSS 变量将 CSS 声明呈现到 DOM 中,以实现高性能、低...
含有外部 css 文件的渲染流水线 ... 提供给 JS 操作样式表的能力 为布局树合成提供基础的样式信息 含有内联 JS 和 外部 CSS 页面的渲染流水线 从上图中可以看到,构建 DOM 过程中遇到 JS 会停止构建,去解
4. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。 5. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。 JS的加载 1. 不能并行...
要运行构建工具,请使用 node 运行 build.js,提供要处理的样式表或样式表目录的路径,以及将样式表保存到的目标。 例如,如果我们想构建 app.css,我们可以这样做: node build.js app.css ../built/app.css ...
引子:今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块化设计》,但是内容太大,还是来点简单的实惠。所以改叫《CSS样式——从...
所有样式表均由解析。 document.querySelector过滤掉HTML文件中找不到的选择器。 其余规则将转换回CSS。 请注意: UnCSS不能在非HTML页面(例如模板或PHP文件)上运行。 如果您需要对模板运行UnCSS,则可能应该...