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 ...
随机推荐
- codeforces659B
Qualifying Contest CodeForces - 659B Very soon Berland will hold a School Team Programming Olympiad. ...
- BZOJ2434[Noi2011]阿狸的打字机——AC自动机+dfs序+树状数组
题目描述 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的: l 输入小 ...
- BZOJ1266 AHOI2006上学路线（最短路+最小割）
求出最短路后找出可能在最短路上的边,显然割完边后我们需要让图中这样的边无法构成1到n的路径,最小割即可,非常板子. #include<iostream> #include<cstdi ...
- Watchdogs利用Redis实施大规模挖矿，常见数据库蠕虫如何破？
背景 2月20日17时许,阿里云安全监测到一起大规模挖矿事件,判断为Watchdogs蠕虫导致,并在第一时间进行了应急处置. 该蠕虫短时间内即造成大量Linux主机沦陷,一方面是利用Redis未授权访 ...
- Android 屏幕操作
1 全屏显示Activity 代码 : 方法一:编程实现 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, Window ...
- 【Luogu1937】仓配置（贪心，线段树）
[Luogu1937]仓配置 题面 直接找洛谷把... 题解 很明显的贪心吧 按照线段的右端点为第一关键字,左端点第二关键字排序 然后线段树维护区间最小就可以啦 #include<iostrea ...
- 【codeforces 335E】 Counting Skyscrapers
http://codeforces.com/problemset/problem/335/E (题目链接) 题意 懒得写了= = Solution 这题咋不上天= =. 参考题解:http://blo ...
- [FJOI2017]矩阵填数——容斥
参考:题解 P3813 [[FJOI2017]矩阵填数] 题目大意: 给定一个 h∗w 的矩阵,矩阵的行编号从上到下依次为 1...h ,列编号从左到右依次 1...w . 在这个矩阵中你需要在每个格 ...
- Apache的ProxyPass简单使用
转: Apache的ProxyPass简单使用 置顶 2017年08月14日 18:54:33 师太,老衲把持不住了 阅读数:11164 http://mtnt2008.iteye.com/blo ...
- Mac下Vim编辑快捷键小结(移动光标)
Mac下Vim编辑快捷键小结(移动光标) 1.移动到行尾"$",移动到行首"0"(数字),移动到行首第一个字符处"^" 2.移动到段首&qu ...