原文: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中是cssRulesIE中是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属性的更多相关文章

  1. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  2. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  3. 自定义属性,innerHTML,outerHTML,dom节点的获取,className,tagName,更改或者是获取css属性

    01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...

  4. js原生获取css属性

    原文参考http://blog.csdn.net/lzding/article/details/46317777 1.写在dom上的属性,内联样式 <div id="box" ...

  5. JS使用getComputedStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...

  6. JavaScript中的CSS属性对照表

    盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-c ...

  7. javascript之复习(css属性值的计算)

    js取div的宽高咋办,css有content-box,border-box,padding-box,表现又不一样.好在有个offsetWidth, <style type="text ...

  8. JS 获取CSS属性值

    obj: 元素对象 attribute: 属性 返回值:该对象这个属性的值 function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM, ...

  9. getComputedStyle获取css属性与IE下的currentStyle获取到的值不同

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

随机推荐

  1. JSPatch 成长之路

    在这次 GMTC 大会上,我见到了 JSPatch 的作者 bang.在这之前我就和他在网上认识并聊过很多次,bang 也在这个公众号上投稿发表了多篇关于 JSPatch 的文章,包括:JSPatch ...

  2. 免费的手机号码归属地查询API接口文档

    聚合数据手机号码归属四查询API接口,根据手机号码或手机号码的前7位,查询手机号码归属地信息,包括省份 .城市.区号.邮编.运营商和卡类型. 通过链接https://www.juhe.cn/docs/ ...

  3. PHP一个最简单的CMS内容管理系统

    博客是一般程序员的入手戏,写得好写不好,有没有兴趣,逻辑性够不够都从这个里面入手 我现在摒弃前台.重点讲解下如何开发一个简单的CMS系统所需要的步骤: 1.清楚流程 1--------登录后台 2-- ...

  4. [Cache] C#操作缓存--CacheHelper缓存帮助类 (转载)

    点击下载 CacheHelper.zip CacheHelper 缓存帮助类 C#怎么操作缓存 怎么设置和取缓存数据,都在这个类里面呢 下面看一下代码吧 /// <summary> /// ...

  5. 读取Excel异常定义了过多字段的解决方法

    /// <summary> /// 从Excel文件导入数据 /// </summary> /// <param name="ExcelStr"> ...

  6. Css 梯形图形 并添加文字

    HTML页面的代码: <body> <div style="width:500px;border:solid 1px #ccc;"> <div> ...

  7. OC基础-day04

    #pragma mark -  Day04_01_匿名对象 1. 如果函数有返回值 我们可以不使用变量接收返回值. 而是直接将函数写在要使用其返回值的地方. 2. 正常情况下.我创建对象. 是使用了1 ...

  8. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  9. java静态代理,动态代理,cglib代理

    代理模式在我们的应用中是很常见的,例如拦截器,spring的事务管理等.之所以能被代理,是因为java允许我们通过反射机制动态构造目标对象,并调用相应的方法. 就好像拿到了目标对象的引用,自然可以在目 ...

  10. HttpRequest 和HttpWebRequest的区别

    [1]问题: asp.NET C#  中HttpRequest 和HttpWebRequest的区别 HttpRequest 与HttpWebRequest 有什么区别? 网上中文的帖子很多,但是答案 ...