在网页设计当中,我们注重网页的行为(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. 【c++版数据结构】之顺序表的实现

    SeqList.h #ifndef SEQLIST_H #define SEQLIST_H #include<iostream> using namespace std; typedef ...

  2. 1)Win10-UWA开发 UWP应用操作方法、Windows 10应用程序的指南

    孙广东   2015.8.22 全部任务类型(比方在列表中显示数据或创建导航窗格)的说明和代码演示样例. 在这一节 包含例如以下: 主题 描写叙述 Accessibility 创建通用的Windows ...

  3. [luogu P4197] Peaks 解题报告(在线:kruskal重构树+主席树 离线:主席树+线段树合并)

    题目链接: https://www.luogu.org/problemnew/show/P4197 题目: 在Bytemountains有N座山峰,每座山峰有他的高度$h_i$.有些山峰之间有双向道路 ...

  4. Mysql实战45讲 06讲全局锁和表锁:给表加个字段怎么有这么多阻碍 极客时间 读书笔记

    Mysql实战45讲 极客时间 读书笔记 Mysql实战45讲 极客时间 读书笔记 笔记体会: 根据加锁范围:MySQL里面的锁可以分为:全局锁.表级锁.行级锁 一.全局锁:对整个数据库实例加锁.My ...

  5. 关于hexo markdown添加的图片在github page中无法显示的问题

    title: 关于hexo markdown添加的图片在github page中无法显示的问题 date: 2018-03-31 00:21:18 categories: methods tags: ...

  6. Linux下Python编译安装

    1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/python-362/ 下载地址:https://www. ...

  7. C#使用tesseract3.02识别验证码模拟登录

    一.前言 使用tesseract3.02识别有验证码的网站 安装tesseract3.02 在VS nuget 搜索Tesseract即可. 二.项目结构图 三.项目主要代码 using System ...

  8. C# Lambda && Linq

    Lambda表达式在C#3.0加入,它是一个匿名函数,可用于创建委托或者表达式树类型,运算符为=>,读作"goes to",=>左侧是变量,右侧是表达式,变量类型可以自 ...

  9. (转载) Android开发时,那些相见恨晚的工具或网站!

    huangmindong的专栏       目录视图 摘要视图 订阅 赠书 | 异步2周年,技术图书免费选      程序员8月书讯      项目管理+代码托管+文档协作,开发更流畅 Android ...

  10. EL与JSTL学习(一)EL技术

    1.EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本的编写. 2.EL从域中取出数据(EL最重要的作 ...