外部样式表声明的样式并不会进入style对象

在网页设计当中,我们注重网页的行为(js)、结构(HTLM)、样式(css)分离开

内联样式表或者内部样式表声明的样式信息都会进入style对象

我们可以测试一下:

但是我们的外部样式表,也就是通过link标签链接进来的style样式,并没有进入style这个对象里面,所以我们在取外部样式表里面对应元素的属性时,是取不到的。

所以可以写一个封装函数,去针对这些样式取值

function getStyle(obj, name) {
    if(obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, false)[name];
    }
}

调用这个封装的函数的话,name值是需要加引号的

例如:getStyle(obj,"width");

时间: 2024-10-14 15:35:27

外部样式表声明的样式并不会进入style对象的相关文章

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

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

用JS查看修改CSS样式(cssText,attribute(&#39;style&#39;),currentStyle,getComputedStyle)

CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 <div id="div1" style="width: 100px; height: 100px; background: black"> 2 </div> 2.内部.外部样式表: 内部样式表就是在<head>头部里有<style&

HTML样式offset[Direction] 和 style.[direction]的区别

以offsetLeft与style.left为例: offsetLeft使用的值是字符串,如"100px", style.left则使用数值,如 100 offsetLeft只可以读,因此用无法通过Js改变这个值实现样式的改变, style.left是可读写的,因此可以通过改变这个值调整div的位置 style.left的值需要事先定义,否则取的时候返回空 Js访问方法:[Element].offsetLeft, [Element].style.left

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_8 css 3种样式引用方法&lt;link&gt;&lt;style&gt;

0.行内样式添加CSS <p style="color: red;">这是一个段落</p> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css</title> 6 </head> 7 <body> 8 <p&

WPF 动态添加控件以及样式字典的引用(Style introduction)

原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的对象就可以了. 下面是Ui,其中定义了一个WrapPanel来存放CheckBox,还有两个按钮,用于测试相关功能. <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.c

Javascript 笔记与总结(2-9)获取运行时的 style 对象

获取内存中(正在渲染)的 style 的值(非内联 style,obj.style 只能获得内联 style 的值),可以用 obj.currentStyle(低版本 IE 和 Opera 支持)和 window.getComputedStyle(IE9 以及 标准浏览器支持)来获取. window.getComputedStyle 的格式是 window.getComputedStyle(obj,伪元素) 第一个参数是要要获取计算后的样式的目标元素 第二个参数是期望的伪元素,如"after&q

HTML DOM Style 对象

摘抄自:HTML DOM Style 对象 通过对象方式设置的属性,与在css文件里面设置的属性是不太一样的,针对属性还会有一些具体的参数的设置: 比如background document.body.style.background="#FFCC80 url(bgdesert.jpg) repeat-y"; background参数设置 Background 属性 属性 描述 background 在一行中设置所有的背景属性 backgroundAttachment 设置背景图像是否

style对象的cssText方法

cssText 本质是什么? cssText 的本质就是设置 HTML 元素的 style 属性值. cssText 怎么用? domElement.style.cssText = "color:red; font-size:13px;"; cssText 返回值是什么? 在某些浏览器中(比如 Chrome),你给他赋什么值,它就返回什么值.在 IE 中则比较痛苦,它会格式化输出.会把属性大写.会改变属性顺序.会去掉最后一个分号,比如: 1 document.getElementByI

8 1 css 2 元素就是标签 2 内联样式 3 css选择器 style ,head ,内部样式表 4 外部样式表 css文件, link标签 ,href,

1 2 3 4 原文地址:https://www.cnblogs.com/anvivi/p/9694814.html