js获取css样式方法
一、CSS样式共有三种：内联样式（行间样式）、内部样式、外部样式（链接式和导入式）
<div id="a" style="width: 100px;height: 100px;"></div>
<style type="text/css">
#a{
width: 100px;
height: 100px;
}
</style>
<body>
<div id="a"></div>
</body>
<!-- 外部CSS样式 -->
<!-- 链接式 -->
<link rel="stylesheet" type="text/css" href="css/temp.css"/>
<style type="text/css">
<!-- 导入式 -->
@import url("css/style.css");
</style>
优先级：一般情况下：内联样式 > 内部样式 > 外部样式
特殊情况下：当外部样式放在内部样式之后，外部样式将覆盖内部样式。
<style type="text/css">
#a{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="css/temp.css"/>
二、js获取css样式
1、内联样式（行间样式）的获取
<div id="a" style="width: 100px;height: 100px;background-color: blue;"></div>
function temp(){
var a=document.getElementById("a");
var aColor=a.style.backgroundColor;
var aWidth=a.style["width"];
alert(aColor+" "+aWidth);
// rgb(0,0,255) 100px
}
2、内部样式的获取
<style type="text/css">
#a{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div id="a"></div>
</body>
function temp(){
// 非IE浏览器
var a=document.getElementById("a");
var aStyle=getComputedStyle(a);
var aColor=aStyle.backgroundColor;
var aWidth=aStyle["width"];
alert(aColor+" "+aWidth);
// rgb(255,0,0) 200px
// IE浏览器
// var a=document.getElementById("a");
// var aStyle=a.currentStyle;
// var aColor=aStyle.backgroundColor;
// var aWidth=aStyle["width"];
// alert(aColor+" "+aWidth);
// red 200px
}
3、外部样式的获取（同内部样式）
<!-- css文件 -->
#a{
width: 300px;
height: 300px;
background-color: #4F5F6F;
}
js获取css样式方法的更多相关文章
- js函数arguments与获取css样式方法
函数传参,当参数的个数不定时,可以使用arguments:表示实参集合 arguments.length=实参个数 获得css样式方法: getComputedStyle()方法---->得到的 ...
- js获取css属性方法
function getDefaultStyle(obj,attribute){ return obj.currentStyle?obj.currentStyle[attribute] : docum ...
- js获取css样式封装
封装 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(ob ...
- JS获取最终样式
在使用jqery时,操作什么都很方便,比如获取CSS样式,直接.css加样式名就可以获取你要的,但是JS,就麻烦点,因为有兼容问题,要做兼容,而jqery都是做好了的, 下面就是使用JS获取CSS样式 ...
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
- js 设置 获取css样式
先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...
- js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法
用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...
- js获取css的各种样式并且设置他们
js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设 ...
- 为什么我获取不到这个css样式？js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
随机推荐
- mixin 在传参中可以出现 参数 在类内部可以定义 作用域
mixin 在传参中可以出现 参数 在类内部可以定义
- JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标
一.说明 取消事件的默认动作. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段 ...
- selenium屏蔽谷歌浏览器弹出的通知
使用chromeoptions来修改浏览器的设置 from selenium import webdriver import time options = webdriver.ChromeOption ...
- zabbix-2.4.8-1添加MySQL状态监控
1.安装zabbix-agentyum -y install zabbix-2.4.8-1.el6.x86_64.rpm zabbix-agent-2.4.8-1.el6.x86_64.rpm 安装以 ...
- Python爬虫:爬取自己博客的主页的标题，链接，和发布时间
代码 # -*- coding: utf-8 -*- """ ------------------------------------------------- File ...
- Android Integer.parseInt java.lang.NumberFormatException: Invalid int解决方法
解决方法: http获取的字符串minutes去空字符串处理minutes.replaceAll("\\D+","").replaceAll("\r& ...
- loadrunder之脚本篇——action分类
Action分类 l . Vuser_init 2. Vuser_end 3. Action 在lr中用户的初始化操作应该存放在Vuser_init中.用户的结束操作存放在Vuser_end中.因为 ...
- 手机端的META差异
手机端的META你了解多少? 我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部, ...
- Oracle常用的OCI函数
一． Oracle oci工具包安装: $ORACLE_HOME\BIN:执行文件和help文件 $ORACLE_HOME\OCI\INCLUDE:头文件 $ORACLE_HOME\OCI\LIB\B ...
- 【HackerRank】Cut the tree
题目链接:Cut the tree 题解:题目要求求一条边,去掉这条边后得到的两棵树的节点和差的绝对值最小. 暴力求解会超时. 如果我们可以求出以每个节点为根的子树的节点之和,那么当我们去掉一条边(a ...