JavaScript如何获取css属性
在web开发中，很多时候我们需要用JavaScript对网页的样式进行修改，接下来，我们就来看一下我们该如何访问css属性，针对不同情况及案例来进行分析。
情况一：css属性位于html标签内
在实际开发过程中，如果样式表的内容比较少的话，我们通常将css属性封装在html标签中，这时JavaScript访问css属性很直接，通过访问html标签的style属性，修改具体的样式即可完成相应的操作。
例如：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>styleTest</title>
</head>
<body> <div style="width: 200px;height: 200px; background: green;" id="mydiv"></div>
<input type="button" value="test" onclick="test()">
<script type=text/javascript>
function test(){
var mydiv=document.getElementById('mydiv');
mydiv.style.background="red"; // id.style.属性 执行相应的操作
}
</script> </body>
</html>
上述案例通过点击按钮，改变对应div的背景颜色。
情况二：css属性在其他文件中
当css样式表不在html文件中，我们通常会在头部引入css文件名，此时。此时如果我们使用情况一的方法访问，则会发现失败。原因就是此时相应的标签没有style这个属性了，如果我们查看对应标签的style时，会发现是undefined。所以我们需要使用新的方法来访问其属性，网上的方法有很多，在这里我给出我所使用的方法。并给出相应的解释，希望能帮助到大家。
首先取得定义类的样式表的引用，用document.styleSheet集合实现这个目的，这个集合包含HTML页面中所以的样式表，DOM为每个样式表定义一个CSSRules的集合，这个集合中包含定义在样式表中的所用css规则 (注意:Mozilla和Safari中是cssRules，IE中是rules)。
具体如下：
第①步：
访问获取css文件 ( [0] 表示获取的引入的第一个css文件)
var icssrules=document.styleSheets[0].cssRules || document.styleSheets[0].rules； // 兼容不同浏览器
第②步：
获取指定的css属性 ( [0] 表示css文件中的第一个标签的css样式 )
var style1=icssrules[0];
第③步：
执行相应操作
style1.style.background="red";
详细代码如下：
html文件：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>styleTest</title>
<link rel="stylesheet" href="style.css">
</head>
<body> <div id="mydiv"></div>
<input type="button" value="test" onclick="test()">
<script type=text/javascript>
function test(){
var mydiv=document.getElementById('mydiv');
var icssrules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;
var style1=icssrules[0];
style1.style.backgroundColor="red";
}
</script> </body>
</html>
外部css文件：
#mydiv {
width: 200px;
height: 200px;
background: green;
}
实际效果截图如下：
点击前：
点击后：
通过两种方式，可以修改相应的css样式表。针对不同的情况可以借鉴不同的方法。
JavaScript如何获取css属性的更多相关文章
- JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- 自定义属性，innerHTML,outerHTML,dom节点的获取，className,tagName,更改或者是获取css属性
01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...
- js原生获取css属性
原文参考http://blog.csdn.net/lzding/article/details/46317777 1.写在dom上的属性,内联样式 <div id="box" ...
- JS使用getComputedStyle()方法获取CSS属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...
- JavaScript中的CSS属性对照表
盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-c ...
- javascript之复习(css属性值的计算)
js取div的宽高咋办,css有content-box,border-box,padding-box,表现又不一样.好在有个offsetWidth, <style type="text ...
- JS 获取CSS属性值
obj: 元素对象 attribute: 属性 返回值:该对象这个属性的值 function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM, ...
- getComputedStyle获取css属性与IE下的currentStyle获取到的值不同
<!doctype html><html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- phpQuery轻松采集网页内容
原文地址:phpQuery轻松采集网页内容作者:陌上花开 phpQuery是一个基于PHP的服务端开源项目,它可以让PHP开发人员轻松处理DOM文档内容,比如获取某新闻网站的头条信息.更有意思的是,它 ...
- ionic 项目分享【转】No.3
写在文章前:由于最近研究ionic框架,深感这块的Demo寥寥可数,而大家又都藏私,堂堂天朝,何时才有百家争鸣之象,开源精神吾辈当仁不让! 原文地址暂时忘记了 ,如果有知道的麻烦在评论处帮忙说一下 , ...
- JavaScript获取网页属性包括宽、高等
function getWindowInfo() {var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidt ...
- OC - 13.数据解析(JSON与XML)
##数据交互格式 服务器返回给用户的数据,通常是以下两种方式: JSON XML JSON 一种轻量级的数据数据格式,体积比XML小,是服务器返回给移动端通常采用的格式 用使用JSON文件中的数据,需 ...
- SQL数据库的备份和恢复
SQL数据库的备份和恢复 一.SQL数据库的备份: 1.依次打开 开始菜单 → 程序 → Microsoft SQL Server 2008 → SQL Server Management Studi ...
- C# json与对象之间的相互转换
1. 添加命名空间 using System.Runtime.Serialization.Json; 2. WriteObject方法 // 从一个对象信息生成Json串 public static ...
- 一个js加css加html完成的HTML
效果图: 代码: HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- json对象的处理
不同的服务器接受的json对象要处理 var str1 = '{"name": "Lucy", "age": 23}'; var str2 ...
- Observer 模式
Observer模式要解决的问题为:建立一个一(Subject)对多(Observer)的依赖关系,并且做到当“一”变化的时候,依赖这个“一”的多也能够同步改变.最常见的一个例子就是:对同一组数据进行 ...
- CSAPP Lab2: Binary Bomb
著名的CSAPP实验:二进制炸弹 就是通过gdb和反汇编猜测程序意图,共有6关和一个隐藏关卡 只有输入正确的字符串才能过关,否则会程序会bomb终止运行 隐藏关卡需要输入特定字符串方会开启 实验材料下 ...