获取元素CSS样式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>获取css样式</title>
</head>
<style>
#box{
position: absolute;
left: 50%;
top: 100px;
background-color: #fff000;
color: blueviolet;
font-size: 2em;
font-weight: bolder;
text-align: center;
width: 300px;
height: 100px;
line-height: 100px;
font-style: italic;
}
</style>
<body>
<div id="box">ProsperLee</div>
<pre>
#box{
position: absolute;
left: 50%;
top: 100px;
background-color: #fff000;
color: blueviolet;
font-size: 2em;
font-weight: bolder;
text-align: center;
width: 300px;
height: 100px;
line-height: 100px;
font-style: italic;
}
</pre>
<script>
/**
* 获取css样式
* ele 元素
* prop 属性名
**/
function getStyle(ele, prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[prop];
} else {
return ele.currentStyle[prop];
}
}
var el = document.getElementById('box');
console.log('position：' + getStyle(el,'position')); // absolute
console.log('left：' + getStyle(el,'left')); // 488.5px
console.log('font-size：' + getStyle(el,'font-size')); // 32px
console.log('font-style：' + getStyle(el,'font-style')); // italic
console.log('max-width：' + getStyle(el,'max-width')); // none
console.log('bottom：' + getStyle(el,'bottom')); // 532px
</script>
</body> </html>
获取元素CSS样式的更多相关文章
- （转载）记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- 利用getComputedStyle方法获取元素css的属性值
在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...
- 转贴：获取元素CSS值之getComputedStyle方法熟悉
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- 获取元素计算样式getComputedStyle（）与currentStyle
window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值. 私有的CSS属性值可以通过对 ...
- js兼容获取元素的样式
js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...
- js中获取元素的样式兼容性的写法
1:设计元素的样式:el.style.color="red"||el.style["color"]="red" 获取元素的样式:el.st ...
- JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型
基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...
- JS获取元素CSS值
一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...
- JS获取元素CSS值的各种方法分析
先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...
随机推荐
- Mybatis之旅第六篇-关联查询
一.引言 通过动态SQL我们可以进行复杂SQL的编写,但之前的例子都是单表查询,在实际开发中,当然不可能都是单表,很多时候我们需要进行关联多表查询(有些公司为了性能还是尽量的使用单表查询),表与表之间 ...
- mqtt服务器apollo的搭建和测试工具paho的使用
(1)前言 MQTT协议是IBM开发的一个即时通讯协议; 基于发布/订阅的消息协议,近些年来被广泛应用于能源.电力.....等硬件性能低下的远程设备,此外国内很多企业使用MQTT作为android手机 ...
- Pycharm：书签的使用
创建匿名书签 有时候我们的代码会写很长,为了查找方便,我们会在经常需要查看的地方插入一个书签.在 Pycharm 中,将光标移动到需要创建书签的行,按 F11 可以创建一个匿名书签,匿名书签的显示是行 ...
- Android Gradle defaultConfig详解及实用技巧
实际项目中,都会应用Android Gradle Plugin,根据实际中的项目模块的职责,可以具体应用如下四种插件类型. 1,apply plugin: 'com.android.applicati ...
- windows下,读取快捷方式lnk所指向的路径
BOOL GetLnkFileName( OUT PWSTR pLnkName, OUT PWSTR OepnFileNameBuufer, IN DWORD OpenFileNameBufferSi ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-popups简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popup/index.html] 一.Intro to ...
- 2017-12-09 JavaScript实现ZLOGO子集: 测试用例
续前文JavaScript实现ZLOGO子集: 前进+转向. 在添加新功能之前, 先添加测试用例, 以应对日益复杂的代码. 选择使用QUnit编写运行测试用例. 暂时对比较复杂和I/O无关的部分进行测 ...
- Visual Studio Code快速删除空行及几个常用快捷键总结
在使用notepad++工具的时候,很多情况下我们会遇到批量替换空行的操作,之前的操作方法是快捷键Crtl+h调出窗口选择替换栏,在查找目标栏中输入\r\n\r\n,替换为 栏中输入\r\n并选择全部 ...
- Windows Server 2016-三种方法备份还原DHCP服务器
方法一:图形化备份还原DHCP: 备份操作: 1.DHCP控制台,属性选择"备份"选项: 2.指定备份路径,默认是C:\Windows\System32\dhcp\ 3.备份完成后 ...
- 通信（二）：进程间通信之socket
一.为什么要学习socket? 我们打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?我们用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠socket.本地的进程间通 ...