js获取css类样式

js 设置获取css样式

先看一段代码,为了体现一会下面说的js用style获取css样式的不同一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft="20px"; 二:通过style获取div的css属性上面的例子用三种形式给div设置了样式 1:行间样式直接写到标签中 2:内联样式写到head头中 3:外联样式,用link加载分别获取,这三种形式设置的样式 console.log(box.style.width); console

js获取css样式方法

一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: 100px;"></div> <style type="text/css"> #a{ width: 100px; height: 100px; } </style> <body> <div id="a"

【总结整理】js获取css的属性（内部，外部，内嵌（写在tag中））

在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空字符串) 然而我们会发现什么也没获取到,这到底是什么原因? 我们仔细观察一下我们是怎么获取这些信息的.通过元素的 style 属性,获取一个关于元素样式信息的对象,在里面取我们需要的样式信息.而我们是不是理所当然的认为我们写在 style 标签内的样式,或者通过 link 引入的样式表的样式信息都存

用JS控制CSS基本样式

详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { width:10px; background-color: red; } HTML code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <

js中尺寸类样式

js中尺寸类样式一:鼠标尺寸类样式都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width 1:检测相对于浏览器的位置:event.clientX/event.clientY client:整个浏览器的可视区域,当点击鼠标的时候,鼠标事件发生的位置距离浏览器可视区域的左边和上边的距离 clientX:鼠标事件发生的位置距离浏览器可视区域的左边的距离 clientY:鼠标事件发生的位置距离浏览器可视区域的上边的距离 2:

JS获取内联样式

JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return document.defaultView.getComputedStyle(obj,null)[attr]; } } 大家都知道,用document.getElementById(‘element').style.xxx可以获取

js获取css的各种样式并且设置他们

js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设置为了兼容IE这孙子; function getStyle(element, attr) { if (element.currentStyle) { return element.currentStyle[attr];//傻逼IE的获取元素的方法 } else { return getCompute

js获取当前有效样式

js获取有效样式节点.currentStyle["属性名"] 兼容ie方法(只有ie有效) getcomputedStyle(节点)["属性名"] 兼容火狐.谷歌(谷歌火狐有效) 总结:既封装的函数为 function getStyle(node, styleType){ return node.currentStyle? node.currentStyle[styleType]:

原生js获取元素的样式信息

工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.width; 该方法基本可以忽略,因为他只能获取到内敛样式.而现在很少会写内联样式.当然他有个好处是可读可写,所以可以据此设置元素的样式. window.getComputedStyle js // 语法如下: window.getComputedStyle('元素','伪元素'); var _css

JS获取非行间样式

我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? 首先让我们看一下js是如何获取行间样式的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

js获取非行间样式/定义样式

<html> <head> <meta charset="utf-8" /> <style> *{ text-align:center;} input{ margin-top:30px; padding:10px 20px;} #div1{ width:500px; height:300px; background:red; margin:10px auto;} </style&g

js获取非行间样式或定义样式

<html> <head> <meta charset="utf-8" /> <style> *{ text-align:center;} input{ margin-top:30px; padding:10px 20px;} #div1{ width:500px; height:300px; background:red; margin:10px auto;} </style&g

js获取非行间样式/写入样式（行间）

<html> <head> <meta charset="utf-8" /> <style> *{ text-align:center;} input{ margin-top:30px; padding:10px 20px;} #div1{ width:500px; height:300px; background:red; margin:10px auto;} </style&g

js获取css

原帖地址:http://kingphp.blog.163.com/blog/static/20042324420120109438458/ 我们通过dom.style获得的属性是有限制的,只能获取html中的css,而link的css是得不到的,可以这样获得: function getStyle (obj, prop) {//获取css, 包括link的css文件中的样式 if (obj.currentStyle) {//IE return obj.currentStyle[prop]; } e

js获取非行内样式

<!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> <meta http-equiv="Content-

JS获取非行间样式及兼容问题

获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取非行间样式</title> <style> #div1{height: 200px;width: 200px;background-color: red;} </style> <script> fun

解决页面js、css代码样式失效

解决方式根据地址不同的层级深度,加上对应的 " . . / "(不推荐): 去掉所有的 " . . / ", 在js或css的路径前加上 " / ": 在引入js或css文件前加上两段代码:

js中获取css的样式

因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj指的是要得到样式的元素 arr指的是要得到的样式属性)在IE浏览器可以使用obj.currentStyle[arr],在火狐浏览器中就是getComputedStyle(obj,false)[arr].但是这样得到的只是字符串,为了当做数字使用还需要用parseInt()方法转换一下.

js获取css中的样式

众所周知,obj.style只能够获取 <div id="a" style="width:100px;"></div> 结构上的样式如果想要获取: <style> div{width:100px;} </style> 的样式的话,需要: function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else

js获取css样式封装

封装 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐 }; 效果如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu

JavaScript获取css 行间样式，内连样式和外链样式的方式

[行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1 console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了 </script> [内连样式获取] <html&

js获取css类样式

热门专题