css样式获取及兼容性(原生js)
类选择器兼容性
getbyclass()类选择器,在IE8及以下均不可用。 // 类选择器的兼容性
CSS行间样式的获取(并非属性)
var odiv=document.getElementById("div1");
alert(odiv.style.height);
CSS内部样式及外链样式的获取
var odiv=document.getElementById("div1");
var a=odiv.currentStyle;
// console.log(odiv.style.cssText);
alert(odiv.currentStyle.width);//IE浏览器
var cssodiv=window.getComputedStyle(odiv); alert(cssodiv.width);//主流浏览器 // 兼容IE和主流浏览器:
function getcssstyle(obj){
if(window.getComputedStyle){return window.getComputedStyle(obj);}//IE9及以上支持,一下为undified
else{return obj.currentStyle;}}//IE浏览器 var odivcss=getcssstyle(odiv);
alert(odivcss.width);
css样式设置
oDiv.style.backgroundColor="";
oDiv[style][backgroundColor]="";
// 方括号一般用在传参的时候(否则系统会把参数当成属性)比如:
function(Name,red){document[name][backgroundColor]=red}
css属性选择器
var li=document.querySelectorAll("li");
var li=document.querySelector("li");
var btn=document.querySelector("input[type=button]")
css样式获取及兼容性(原生js)的更多相关文章
- 改变某个对象的CSS样式时,不要使用JS直接添加样式,
重绘: 使用js改变网页的背景颜色 浏览器会把整个网页的颜色重新在画一遍,导致性能降低 回流: 只要改变某个DOM对象的宽或者高,浏览器就会重新再计算网页结构,重新生成一次,导致性能严重降低. CSS ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- day26—JavaScript对CSS样式的获取和修改实践
转行学开发,代码100天——2018-04-11 通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能.对于CSS样式通常有行内样式,外部样式,内嵌样式之分. 如: 行内样式: ...
- 为什么我获取不到这个css样式?js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- 原生JS获取HTML样式并修改
大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出 ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
随机推荐
- 洛谷 P1065 作业调度方案
P1065 作业调度方案 题目描述 我们现在要利用 mm 台机器加工 nn 个工件,每个工件都有 mm 道工序,每道工序都在不同的指定的机器上完成.每个工件的每道工序都有指定的加工时间. 每个工件的每 ...
- MongoDB小结21 - find【游标】
数据库使用游标来控制find的执行结果. 客户端对游标的实现通常能够对最终结果进行有效控制. 可以限制结果的数量,略过部分结果,对任意方向任意键的组合对结果进行排序,或者去执行一些功能强大的操作. 我 ...
- Watcher 实现机制之client注冊
Zookeeper 提供的了分布式数据的公布/订阅功能,通过 Watch 机制来实现这样的分布式的通知功能. Zookeeper 同意client向server注冊一个Watch监听.当服务端的一些指 ...
- 【Android】自己定义View、画家(画布)Canvas与画笔Paint的应用——绘图、涂鸦板app的实现
利用一个简单的绘图app来说明安卓的图形处理类与自己定义View的应用. 例如以下图,有一个供用户自己随意绘图.涂鸦的app. 这里不做那么花俏了,仅提供黑白两色.但能够改变笔尖的粗细. 实质上这里的 ...
- iOS平台加入Google Admob -1/2(Unity3D开发之七)
猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com.谢谢! 原文地址: http://www.cocos2dev.com/?p=567 Unity调用iOS还是非 ...
- JavaScript基础 -- BOM
JavaScript三大核心: 1)核心(ECMAScript):描述了JS的语法和基本对象 2)文档对象模型(DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器交互的方法和接 ...
- 谈谈C++私有继承
很多C++程序猿从来没用过私有继承来设计他的类.的确,假设是本该用私有继承的地方却用了公有继承.对程序的功能的实现并无影响. 但这样的误用是一种错位的描写叙述.会引起阅读者的误解,甚至会引起类的使用者 ...
- sparksql语句
(1)in 不支持子查询 eg. select * from src where key in(select key from test);支持查询个数 eg. select * from src w ...
- bzoj 1370 Gang团伙
题目大意: 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,满足 1. 我朋友的朋友是我的朋友 2. 我敌人的敌人是我的朋友 所有是朋友的人组成一个团伙 告诉你关于这n个人的m条信息,即某两个 ...
- werkzeug 详解
首先,先向大家介绍一下什么是 werkzeug,Werkzeug是一个WSGI工具包,他可以作为一个Web框架的底层库.这里稍微说一下, werkzeug 不是一个web服务器,也不是一个web框架, ...