js获取元素的外链样式

一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>。如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置。但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了。

在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样式,但是在ie浏览器中则是通过obj.currentStyle来获取。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{width:500px;line-height:30px;}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
function getstyle(obj,property){
if(obj.currentStyle){
return obj.currentStyle[property];
}else if(window.getComputedStyle){
return document.defaultView.getComputedStyle(obj,null)[property];//或者也可以通过window.getComputedStyle来获取样式
}
return null;
}
$(document).ready(function(){
  $("p").click(function(){
   alert(getstyle(this,"width"));
  });
});
</script>
</head>
<body>
<p style="width:750px;">如果您点击我,我会消失。</p>
<p>点击我,我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>
时间: 2024-08-24 22:27:07

js获取元素的外链样式的相关文章

JS获取元素计算过后的样式

获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = window.getComputedStyle(element, [pseudoElt]);  element:用于获取计算养殖的element pseudoElt:可选,指定一个更匹配的伪元素的字符串,必须对普通元素省略或null 返回值:是指指定元素或伪元素的所有属性的集合 如果没有伪元素,,伪元素

js获取元素样式方法

? 1 2 3 4 5 6 7 8 function getStyle(ojb,attr){       if(obj.currentStyle){             return obj.currentStyle[attr];       }         else{            return getComputedStyle(obj,false)[attr];        } } js获取元素样式方法,布布扣,bubuko.com

js获取元素样式包括非行内样式

var obj=document.getElementById("id"): 由于js新版本的发放,越来越多的人喜欢用原生js而非jquery对dom元素进行操作,那么如果通过js获取dom元素的样式呢,很多人都知道用obj.style这种方式,但是,这种方式只能获取dom行内样式,一旦,我们定义class,然后再css文件里写时就会获取不到,下面我主要介绍获取行内样式和获取非行内样式两种获取方法. 1,获取行内样式. <div style="width:200&quo

Js获取元素样式值(getComputedStyle&amp;currentStyle)兼容性解决方案

因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用getComputedStyle,以及currentStyle. IE下获取元素的实际属性值使用currentStyle属性,getComputedStyle同currentStyle作用相同,但是适用于FF.opera.safari.chrome.但用这种方法在IE7,IE8,IE9获取元素属性值

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有

JS获取元素属性

<style> *{ box-sizing: border-box; } html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; } .main{ width: 600px; height: 300px; margin: 0 auto; background: #999; } #p1{ padding: 10px 20px; } </style> <div class="main&

CSS的内联样式和外链样式简单介绍

CSS的内联样式和外链样式简单介绍:关于标题中的概念可能很多朋友根本就有在意过,或者没有特别的注意,但并不说明他们就没有使用对应的方式设置样式,但是能够明白各自的代表那种方式总比不明白的好,下面就介绍一下它们各自的概念.一.内联样式:所谓的内联样式就是直接写在标签内部的样式,代码如下: <div style="color:red">蚂蚁部落</div> 以上代码可以将字体颜色设置为红色.二.外链样式表:外链样式表就是通过在网页头部利用link标签引用一个单独的c

js获取元素宽高

只说ie8+的浏览器的方法. 在转vue之前,一直使用jquery来获取元素的高度,最近转vue,发现了一个问题.使用vue的时候,部分操作需要在mounted这个生命周期里面去做,官网对mounted的解释是: 如果不在vm.$nextTick里面做操作的时候,是很有可能获取不到组件内部元素的宽高的.刚开始的时候,我没有仔细看官网,所以在mounted里面是直接获取不到子孙元素的宽高的. 后来,看了iview的一个组件的源码,看到了getComputedStyle方法获取宽高,对getComp

js 获取元素坐标 和鼠标点击坐标

js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); alert(odiv.getBoundingClientRect().top); js 获取点击时间鼠标坐标 event = event||window.event; //获得相对于body定位的横标值: x=event.clientX //获得相对于body定位的纵标值: y=event.clientY