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 ...
随机推荐
- MidoNet 安装（Kilo RDO）（最老版）
一.初始化(Kilo RDO)版(最老版) 环境介绍 系统 CentOS 7.3 主机ip 10.211.55.5 主机名 midonet 1.配置yum源 ###OpenStack源 yum ins ...
- ComboBox中如何嵌套TreeView控件
在ComboBox中嵌套TreeView控件,有时候我们在设计界面的时候,由于界面设计的需要,我们需要将TreeView控件嵌套在ComboBox中,因为TreeView控件实在是太占用地方了,要 ...
- SQL Server 公用表表达式(CTE)实现递归
公用表表达式简介: 公用表表达式 (CTE) 可以认为是在单个 SELECT.INSERT.UPDATE.DELETE 或 CREATE VIEW 语句的执行范围内定义的临时结果集.CTE 与派生表类 ...
- python 从filelist.txt中拷贝文件到另一文件夹中
#! python #coding:utf-8 ##!/usr/bin/python # Filename : fileCp.py import sys import os import shutil ...
- Java动态代理、XML、正则
15.1 动态代理 在之后学习Spring框架时,Spring框架有一大核心思想,就是AOP,(Aspact-Oriented-Programming 面向切面编程) 而AOP的原理就 ...
- BZOJ1042 HAOI2008硬币购物（任意模数NTT+多项式求逆+生成函数/容斥原理+动态规划）
第一眼生成函数.四个等比数列形式的多项式相乘,可以化成四个分式.其中分母部分是固定的,可以多项式求逆预处理出来.而分子部分由于项数很少,询问时2^4算一下贡献就好了.这个思路比较直观.只是常数巨大,以 ...
- BZOJ1045 HAOI2008糖果传递（贪心）
显然最后每个小朋友所拥有的糖果数就是糖果数总和的平均数.设该平均数为t. 环的问题一般断成链,但这个题似乎没有什么很好的办法在枚举断点的时候快速算出答案(我甚至不知道会不会有断点) 于是我们假装把他断 ...
- 自学Zabbix3.12.3-动作Action-自动发现action配置
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix3.12.3-动作Action-自动发现action配置 1. 首先先学习 Ne ...
- 【BZOJ1818】[CQOI2010]内部白点（树状数组，扫描线）
[BZOJ1818][CQOI2010]内部白点(树状数组,扫描线) 题面 BZOJ 题解 不难发现\(-1\)就是在搞笑的. 那么对于每一行,我们显然可以处理出来最左和最右的点,那么等价于我们在横着 ...
- 【ATcoder s8pc_3 F】 寿司
http://s8pc-3.contest.atcoder.jp/tasks/s8pc_3_f (题目链接) 题意 有一个长度为$N$的数列$A$,初始为$0$.$Q$次操作,每次两个参数$x,y$. ...