原生js提取非行间样式
js用style属性可以获得html标签的样式，但是不能获取非行间样式，如何获取css的非行间样式呢，在低版本ie我们可以用currentStyle，在其他浏览器我们可以用getComputedStyle。
1、ie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:200px;
height:200px;
background: skyblue;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
alert(box.currentStyle["width"]); //200px
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
2、其他浏览器
alert(getComputedStyle(box,false)["width"]); //200px
3、兼容
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
} window.onload=function(){
var box=document.getElementById("box");
alert(getStyle(box,"width")); //兼容ie及其他浏览器
}
</script>
4、获取及设置非行间样式
<script>
function getStyle(obj,attr,value){
if(arguments.length==2){ //根据参数个数执行相应操作
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}else{
obj.style[attr]=value; //这里需要注意，使用obj.style.attr无效
} } window.onload=function(){
var box=document.getElementById("box");
getStyle(box,"backgroundColor","yellowgreen"); //把盒子的背景颜色设置成黄绿色
alert(getStyle(box,"width")); //弹出盒子的宽度200px
}
</script>
原生js提取非行间样式的更多相关文章
- JS获取非行间样式
我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...
- js获取非行间样式/定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- JS获取非行间样式及兼容问题
获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js获取非行间样式或定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js获取非行间样式/写入样式（行间）
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js 获取非行间样式
1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...
- JS取非行间样式
<title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red;} < ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- js兼容总结之获取非行间样式
非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...
随机推荐
- php - empty() is_null() isset()的区别
empty():当变量存在,并且是一个非空非零的值时,返回 FALSE,否则返回 TRUE. is_null():如果指定变量为 NULL,则返回 TRUE,否则返回 FALSE. isset():如 ...
- 10.2 DOM 操作技术【JavaScript高级程序设计第三版】
很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...
- 图解HTTP总结（7）——确保Web安全的HTTPS
HTTP 主要有这些不足, 例举如下. 通信使用明文( 不加密) , 内容可能会被窃听. 不验证通信方的身份, 因此有可能遭遇伪装. 无法证明报文的完整性, 所以有可能已遭篡改 ...
- Linux之rsync同步工具介绍+inotify同步
1.rsync介绍 Rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份的优秀工具.Rsync软件适用于unix/linux/windows等多种操作平台. rsync, ...
- 通过IIS共享文件夹来实现静态资源"本地分布式"部署
以下以文件型数据库(如sqlite)为例 楼主话:以下内容,若有不专业处,大胆喷,虚心求教. 起因:要进行一个项目的分布式部署,而这个项目所涉及的其中一个数据库为sqlite(经测试,同为文件型数据库 ...
- python基础之正则表达式爬虫应用，configparser模块和subprocess模块
正则表达式爬虫应用(校花网) 1 import requests 2 import re 3 import json 4 #定义函数返回网页的字符串信息 5 def getPage_str(url): ...
- MVC WebAPI 的基本使用
1.什么是WebAPI Web API是网络应用程序接口.包含了广泛的功能,网络应用通过API接口,可以实现存储服务.消息服务.计算服务等能力,利用这些能力可以进行开发出强大功能的web应用. 它可以 ...
- 1- js vue.js
1 js 2 Vue.js
- 8 定制10MINs 3
1. <div class="ui inverted red basic segment"> <h3 class="ui header"> ...
- android stadio open recent 在同一窗口打开
Android staido 有一个功能是open recent ,默认是下面这样的: 就出来一个框,给你选择,是在新的窗口打开,还是在当前窗口打开.如果你选了当前窗口,并且点了Remember,do ...