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 ...
随机推荐
- VC/MFC 下 递归遍历目录下的所有子目录及文件
在MFC下要实现文件夹的递归遍历,可用CFileFind类,依次读取文件夹下的子文件夹和文件,并判断通过判断是文件夹还是文件来决定递归遍历.递归遍历代码如下: /******************* ...
- Java基础知识强化之网络编程笔记09:TCP之客户端键盘录入服务器写到文本文件中
1. TCP之客户端键盘录入服务器写到文本文件中 (1)客户端: package cn.itcast_09; import java.io.BufferedReader; import java.io ...
- 用php切割大图片为成规则的小图
将根据xml配置,将合并后的大图切割成一系列小图 <?php /** * 将大图片按照配置切割成一定比例的小图片 * 并按照一定规则给小图片命名 * * 使用方法: *根据guardians/g ...
- C# QRCode、DataMatrix和其他条形码的生成和解码软件
今天制造了一个C#的软件,具体是用于生成二维码和条形码的,包括常用的QRCode.DataMatrix.Code128.EAN-8等等. 使用的第三方类库是Zxing.net和DataMatrix.n ...
- JQuery字符串替换replace方法
在日常的js开发中,常常会用到JQuery, 当要把字符串中的内容替换时,如果使用类似C#的string.replace方法,如下 var str='aabbccaa'; str=str.replac ...
- [时间操作] C#DateFormat时间帮助类 (转载)
点击下载 DateFormat.rar 主要功能如下 返回每月的第一天和最后一天 看下面代码吧 /// <summary> /// 类说明:时间操作类 /// 编 码 人:苏飞 /// 联 ...
- 如何下载到最新的版本的Oracle Database
其实这不是一个很困难的事情,但是发现好多同学都不知道,其实只需直接访问Oracle的官网就可以找到,鉴于Oracle经常改到下载面也我这里直接粘贴下载地址 http://www.oracle.com/ ...
- EA UML 建模——类图
Enterprise Architect(EA) 是一个功能比较强悍的建模工具,本篇文章仅使用其 UML 建模功能,其他更多功能,可以Google. 一.简单梳理C#中类与类.类与接口.接口与接口的关 ...
- tomcat上servlet程序的配置与处理servlet请求过程
手动配置: tomcat服务器下web项目的基本目录结构 |-tomcat根目录 |-webapps |-WebRoot : web应用的根目录 |-静态资源(html+css+js+image+ve ...
- linux服务端的网络编程
常见的Linux服务端的开发模型有多进程.多线程和IO复用,即select.poll和epoll三种方式,其中现在广泛使用的IO模型主要epoll,关于该模型的性能相较于select和poll要好不少 ...