Js取元素外链样式属性的问题

  最近一直在学web方面的知识,今天在练习一个JS实例,遇到一个问题,js取元素样式,一般情况下是通过getElement.style来取的,但这个只能取到元素的内联样式,对于写在其他地方的CSS就无能为力了,在一番苦思没结果情况下,就来查百度了(遇到问题,我喜欢自己尝试能不能解决,尝试的过程虽然没能解决问题,但至少知道了有N种方法不能解决这个问题).

  在新浪博客上,看到有位前辈写的博文,说getElement.style是只能取到元素的内联样式,对于没有写在元素内的,无法取倒,但是,js提供了另外一种方法可以很方便的取出元素的样式对象(document.getComputedStyle(‘元素对象‘,‘伪类名‘).属性名),通过对象点属性的方式,就可以取出需要的样式了.注意其中有两个参数,其中一个要填入我们取得的元素对象,另一个填伪类,如果元素没有伪类,第二个属性可以忽略不写.

  看完之后,就信心满满的回来做自己的练习,结果问题又出现了,一样是没办法取到样式属性的,尝试了好久,烦得头疼,无奈之下,又回来求助度娘.

  但搜索到的文章都大同小异,说的方法都差不多,难道是我写错了?又仔细检查自己代码,没有发现有问题呀!那问题到底出在何处了?

  只好在百度上一篇一篇文章的看,苍天不负有心人,终于找到一篇介绍getComputedStyle方法的文章(那个原博客的链接找不到了),其中说到一个细节,getComputedStyle方法,不仅可以通过document来访问,还可以通过windows来访问,难道问题出在这儿了吗?马上尝试了下,哈哈,果真一下子解决了困挠半天的问题.具体原理,为什么用document来访问取不了属性,而通过windows可以?现在还不太明白,初学者,正在努力当中,这个问题先留下,以后随着学习的加深,再来解这个谜.

时间: 2024-11-04 13:40:51

Js取元素外链样式属性的问题的相关文章

通过js获取元素的css样式属性

var display = this.currentStyle? this.currentStyle.display: window.getComputedStyle(this, null).display; 这样可以获取定义在内部~外部样式表以及内嵌的所有的样式~当然这里指获取display属性~简单来说就是只要定义了display~不管在哪里设置的~都可以获取出来

对于用js获取元素的css样式属性(getComputedStyle,currentStyle,style)(getPropertyValue,getAttribute)

首先单独拎出来讲的是style style: nodeObject.style.cssProperty获取的是DOM节点上 style 属性定义的样式,如果不存在 style 属性,或者 style 属性没有定义相应的样式,则是无法获取的.也就是说,JavaScript 不会到 <style> 标签或者 CSS 文件去获取相应的样式,只能获取 style 属性定义的样式. 就是外部样式表,内部样式表,用style都是无效的,只有内联样式是有效的,当然用style写入也是写入在内联样式的. 然后

js获取元素的外链样式

一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样

2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式

jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3 ,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后 续版本将不再支持IE6/7/8浏览器.jQuery能够使用户的html页面保持代码和h

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

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

获取元素的CSS样式属性值 IE兼容写法

/** * 获取元素的CSS样式属性值 */function css(element, attrName) { /*if (window.getComputedStyle) return window.getComputedStyle(element)[attrName] return element.currentStyle[attrName];*/ return window.getComputedStyle ? getComputedStyle(element)[attrName]: el

JS获取元素非行间样式的方法

currentStyle :只兼容IE浏览器 getComputedStyle :获取计算后的样式,不兼容IE6.IE7.IE8 如何获取非行间样式,同时兼容所有浏览器呢? window.onload=function(){ var oDiv1=document.getElementBy("div1"); if(oDiv.currentStyle){ //如果浏览器支持currentStyle oDiv.currentStyle.width; }else{ //如果浏览器不支持curr

Jquery和js取数据的区别以及引用Jquery文件

<!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获取元素样式

摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中