在网页设计当中,我们注重网页的行为(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");

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

  1. 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  2. JavaScript获取HTML元素样式的方法(style、currentStyle、getComputedStyle)

    一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补st ...

  3. HTML5的新特性:范围样式,又叫做<style scoped>

    Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做<style scoped> .开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于 ...

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

    原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的 ...

  5. Style对象之一

    <html> <style type="text/css"> body{ background-color="#FFCC80"; bac ...

  6. 原生JavaScript HTML DOM Style 对象参考

    Style 对象属性 可以在Style对象上使用以下属性: “CSS”列指示定义属性的CSS版本(CSS1,CSS2或CSS3). 属性 描述 CSS alignContent 当项目不使用所有可用空 ...

  7. 浏览器端-W3School-HTML:HTML DOM Style 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Style 对象 1.返回顶部 1. HTML DOM Style 对象 Style 对象 Style 对象代表一个单独的样式声 ...

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

    获取内存中(正在渲染)的 style 的值(非内联 style,obj.style 只能获得内联 style 的值),可以用 obj.currentStyle(低版本 IE 和 Opera 支持)和 ...

  9. style对象的cssText方法

    cssText 本质是什么? cssText 的本质就是设置 HTML 元素的 style 属性值. cssText 怎么用? domElement.style.cssText = "col ...

随机推荐

  1. cloudstack给已有zone加入物理网络

    默认情况下,假设zone建立完后.cloudstack是不提供加入物理网络接口的. 基础架构- 域 - 物理网络 以下仅仅有我们创建zone的时候加入的物理网络 假设想在这个基础上加入一个物理网络是没 ...

  2. 带你认识 MySQL 之 MySQL 体系结构

    序 近期一直在忙项目,各种加班加点,项目上线.渐渐的没有了学习的时间.这不,刚这几天才干抽出点时间.忙里偷闲,正在看一本数据库的书籍.相信非常多小伙伴们也都看过 - - <MySQL 技术内幕: ...

  3. 在vmware下为oracle RAC 创建共享存储的总结

    首先,介绍下用命令行vm-diskmanager形式创建磁盘文件的方法(其实,图形界面添加新磁盘就是调用此命令).       很多网上文章提及plainmaker.exe去创建共享磁盘,是以前的版本 ...

  4. HTML5学习笔记(一):HTML5基本概念

    1.HTML的发展历程 HTML(1994年,W3C成立) HTML2(1995年) HTML3(1996年) HTML4.0(1997年) HTML4.01(1999年)——HTML5(2008年: ...

  5. C#各个版本中的新增特性详解【转】

    序言 自从2000年初期发布以来,c#编程语言不断的得到改进,使我们能够更加清晰的编写代码,也更加容易维护我们的代码,增强的功能已经从1.0搞到啦7.0甚至7.1,每一次改过都伴随着.NET Fram ...

  6. C++提高速度

  7. PHP正则表达式函数总结

    /* 测试环境:PHP5.3.29(PCRE8.32) */ 常用函数:(正则表达式规则基本同JS_RE_Read.txt) PS:1.PHP中的PCRE一般仅使用这三个修饰符:"i&quo ...

  8. rem 使用

    html{ font-size:12px; } .btn { width: 6rem; height: 3rem; line-height: 3rem; font-size: 2rem; displa ...

  9. Linux部署之批量自动安装系统之Kickstart篇

    1.         安装   2.         在桌面环境下啊配置   3.         Kickstart之基本配置   4.         Kickstart之安装方法   5.    ...

  10. vue非空校验

    效果图 实现代码 //页面html <div> <ul class="listinfo"> <li> <span class=" ...