js 获取DOM的style属性
<!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>
<title>计算元素样式</title>
<style type="text/css">
#myDiv
{
background-color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div id="myDiv" style="background-color: red; border: 1px solid black">
</div> <script type="text/javascript"> var myDiv = document.getElementById("myDiv");
alert(getStyle(myDiv,"backgroundColor"));//"red" 或 rgb(255,0,0)
alert(getStyle(myDiv,"width")); //"100px"
alert(getStyle(myDiv,"height")); //"200px"
alert(getStyle(myDiv,"border")); //在某些浏览器中是“1px solid black”
//var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
//alert(computedStyle.backgroundColor); //"red"
//alert(computedStyle.width); //"100px"
//alert(computedStyle.height); //"200px"
//alert(computedStyle.border); //在某些浏览器中是“1px solid black” //获取DOM的style属性
function getStyle(obj,attr)
{
if(obj.currentStyle) //用于IE
{
return obj.currentStyle[attr];
}
else
{
// document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法
return document.defaultView.getComputedStyle(myDiv, null)[attr];
//getComputedStyle DOM1中的方法
//return getComputedStyle(obj,false)[attr];
}
} </script> </body>
</html>
js 获取DOM的style属性的更多相关文章
- js获取dom对象style样式的值
js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中,从慕课网上见到讲师封装的一个方法,挺不错.特此记录下来. function getStyle(obj,attr){ if(o ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- js 获取和设置css3 属性值的实现方法
众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- vue 获取dom的css属性值
<template> <div id="topInfo" ref="topInfo" style="width: 200px;hei ...
- js获取一个对象的所以属性和值
在HTML DOM中,获取某个元素对象的时候,往往记不住它的很多属性,可以通过下面的例子来查找一下: <!DOCTYPE html> <html> <body> & ...
- js 获取html5的data属性
我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...
随机推荐
- python模块_多重继承的MRO
MRO(Method Resolution Order):方法解析顺序.Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多问题,比如二义性,Python中一切皆引用 ...
- DTD举例一
DTD举例一: <!--动作库约束文件--> <!DOCTYPE actionGroup [ <!ELEMENT actionGroup (action*)> <! ...
- selenium之批量执行测试用例
把写好的测试用例放在指定目录下,使用discover函数扫描该目录,并根据关键字自动筛选需要执行的用例.本例使用Python3.6版本. # 遍历指定目录,批量执行测试用例 import unitte ...
- Nginx FIND_CONFIG阶段
Location 指令 syntax : location [=|~|~*|^~] uri {...} @name {....} default: -- context: server,locati ...
- C# == 和 Equals
先看一下解释 msdn对于 == 的解释: 对于预定义的值类型,如果操作数的值相等,则相等运算符 (==) 返回 true,否则返回 false. 对于 string 以外的引用类型,如果两个操作数引 ...
- 自学Zabbix4.3 zabbix实战监控Web网站性能
自学Zabbix4.3 zabbix实战监控Web网站性能 用zabbix如何监控web性能和可用性呢?一般分为四个步骤:打开网站.登陆.登陆验证.退出,看实例. 1. 检测流程 1. 打开网站:如果 ...
- BZOJ 3503 [CQOI2014]和谐矩阵
题目链接 BZOJ 3503 题解 没想到--直接用暴力的\(O((nm)^3)\)算法,居然能过?! 高斯消元解异或方程组. #include <cstdio> #include < ...
- 洛谷 P4074 [WC2013]糖果公园 解题报告
P4074 [WC2013]糖果公园 糖果公园 树上待修莫队 注意一个思想,dfn序处理链的方法,必须可以根据类似异或的东西,然后根据lca分两种情况讨论 注意细节 Code: #include &l ...
- luogu2680 [NOIp2015]运输计划 (tarjanLca+二分答案+树上差分)
我们先不会就二分一下答案,设它是x,我们要判断它能不能满足 为了满足这个答案,我们就要让原本路径长度大于x的所有路径都经过某条边,而且这条边还要大于等于最长的路径-x 于是运用树上差分的思想,对于所有 ...
- SimpleDateFormat是线程不安全的，切忌切忌！
多线程方法中使用了共享变量SimpleDateFormat,报如下错误: java.lang.NumberFormatException: multiple points at sun.misc.F ...