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 ...
随机推荐
- 16mysql1
一.数据库的基本概念 1.1 常用的关系型数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. 1.2 sql语言 ...
- docker --Dockerfile--最小java环境
# AlpineLinux open jre 8FROM alpine:latest # Install cURLRUN echo -e "https://mirror.tuna.tsing ...
- ceph API之PHP的S3-SDK包的泛域名解析问题
安装dns工具包yum -y install bind-utils 安装dns软件 yum install -y dnsmasq 配置dnsmasq的配置文件:/etc/dnsmasq.conf li ...
- ASP.NET MVC5使用Area区域
转载:http://www.lanhusoft.com/Article/217.html 在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它 ...
- day10 函数的嵌套执行顺序
函数嵌套的执行顺序,从上往下,一层一层的执行重点注意的是函数和内存的交互原理 NMAE = def yangtuo(): # 2 将整个函数放入内存编译,但是不执行 name = "yang ...
- QT 5 安装 vs2017 后，出现找不到 rc.exe 问题
QT 5 安装 vs2017 后,出现找不到 rc.exe 问题 qt 5 cannot run 'rc.exe' 出现这种错误,是因为,rc.exe 未找到,也就是 SKD 路径不对. 找到相应的 ...
- 自学Zabbix3.12.6-动作Action-Escalations配置
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 3.12.6 自学Zabbix3.12.6-动作Action-Escalations配置 1. 概 ...
- 【转】在单片机中，C语言的一些误用和总结！
在学习单片机的时候才真正知道C语言是什么,它是来干什么的~但是C语言用到嵌入式只是它小小的一部分应用,还有很多地方呢. 我们是不是在写程序的时候,错误很多就算编译通过了也达不到我们预期的结果,完了自己 ...
- scrapy 部署
下面简单介绍两种部署的方式,第一种也是我们最常用的crontab定时任务+日志,第二种则是scrapyd部署. 遇到的第一个问题,就是如何将编写好的spider启动: 最简单的方式: 1.在spide ...
- 隐藏技能go:linkname
来源:https://blog.csdn.net/lastsweetop/article/details/78830772 什么是go:linkname 指令的格式如下: //go:linkname ...