DOM疑惑点整理（二）内联、嵌入、外联样式访问

adeyi 2019-06-27

访问的style属性为空？

有时候，直接通过某元素的style属性去查看相关信息时，会发现查看到的是空的属性。
原因很简单，style属性只能访问内联样式，而你把css写在了外部文件。
不是很清楚内联样式，可以看下面的解释：
内联样式：直接加在某个元素属性中的样式。

<p style="color:white;font-size：10px;">外联样式</p>

嵌入样式：样式的属性内容写在该网页代码中。

<head>
    <style>
        p{
            color:white;
            font-size：10px;
        }
    </style>
</head>
<body>
    <p>内联样式</p>
</body>

外联样式：样式属性，写在外部文件，通过链接导入。

<head>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
    <p>内联样式</p>
</body>

注意点：css样式的应用，采取就近原则，因此一般情况优先级是：内联样式>嵌入样式>外联样式。（但如果外联样式的link语句在嵌入样式之后，那么外联样式由于离元素更近，优先级就高于嵌入样式了）

css样式访问注意点

①虽然通过style属性，只能访问内联元素样式，但我们通常还是利用style属性来改变css样式。
②不建议利用style属性去查看一个元素的样式，因为你很可能无法得到正确样式。Dom2中有新的方式去查看完整的属性（某元素内联、外联、嵌入样式合起来计算后的属性）。
方法如下：

function showComputedStyles(){
        const myDiv = document.getElementById("myDiv");  //假设有个myDiv
        if(myDiv.currentStyle){      //IE不支持getComputedStyle方法
            let computedStyle = myDiv.currentStyle;
            console.log(computedStyle.backgroundColor);   
        }else{                       //非IE浏览器可以用getComputedStyle方法
            let computedStyle = document.defaultView.getComputedStyle(myDiv,null); 
            console.log(computedStyle.backgroundColor); 
        }
    }

注意点：通过这样的方式得到的属性，都是经计算后的，同时也是只读的。但十分建议用这种方式去查看元素的属性。关于修改属性，还是得用style属性或者setAttribute。

adeyi

adeyi

相关推荐

HTML基础（二）

总结：网页布局采用span 或者div进行布局，通常 div嵌套span div会换行 span不会换行

STPace / 0评论 2020-03-07

html知识点

块元素显示时，通常以新行开始。<span>是内联元素，可以作为文本的容器

nercon / 0评论 2019-12-31

css块级元素

《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行

zhanghao / 0评论 2019-12-23

web前端入门到实战：html常见的块元素与内联（行内）元素用法说明

html平时常见的块元素有：div, p, h1, h2, h3等，内联元素有：span, a, img等。主要用于选中文本设置样式。div块元素仅仅只用于进行页面布局，它自身不带任何默认样式。一般情况下，只使用块元素包含内联元素，而不会使用内联元素去包含

wwwxuewen / 0评论 2019-11-17

CSS文档流与块级元素和内联元素

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块级元素都独占一行,浮动元素则按规定浮在行的一端.若当前行容不下, 则另起新行再浮动.浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中

sorryericsson / 0评论 2014-05-30

css变量赋值和取值的四种方式(js设置值、内联样式、:root选择器、html选择器)

对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。应该是类似于html页面的元素会把多余空格变成一个空格。

jianqi / 0评论 2019-06-30

《CSS世界》笔记三：内联元素与对齐

写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已。在这一篇博客中，张大大从深层次解释了垂直对齐的原理，并为内联元素的垂直对齐提供了最佳实践。x-height：小写字母 x 的高度，术

jianqi / 0评论 2019-06-28

HTML5 块级元素与行内元素

块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。

hhhkhhh / 0评论 2015-11-21

CSS:2个重要概念块状元素和内联元素

网页制作Webjx文章简介：是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。在用CSS布局页面的时候，我们会将HTML标签分成两种，块状元素和内联元素。块状元素一般是其他元素的容器，可容纳内联元素和其他块

覆雪蓝枫 / 0评论 2015-09-30

html 元素分类

元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。<div>、<p>、<h1>...<h6>、<ol&g

PioneerFan / 0评论 2015-05-19

深入理解-CSS内联元素之line-height

上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内联盒模型相关的东西，这里保持了与上一篇类似的结构，先来说说概念，然后是度量单位，最后来聊一个常见的内联元素的现象。内联盒模型相关概念说到盒模型

yezi / 0评论 2019-06-27

深入理解-CSS内联元素之font-size

技术是以目的为导向的，那么先来抛出一个问题，前端开发中我们使用font-size来设置文字的大小，但检查元素后发现内联元素的高好像大多数时间并不是我们设置的font-size大小，这是为什么哪？

impress / 0评论 2019-06-27

CSS块级元素、内联元素概念

看过O'Reilly的《CSS权威指南》，发现里面提到的文档流概念让我很敏感。可恶的是书中并没有解释文档流是什么东西，或许作者觉得这个太简单了以至于不值一提。理解了它，一堆CSS布局的理论都 变得易于理解，并且体会到CSS这套设计的合理性所在。文档流将窗体

qianxiaona / 0评论 2014-09-04

css学习 2 笔记

内联元素——span设置宽、高、margin都不会起作用，其它相邻元素不会被撑开。

liusure0 / 0评论 2014-07-06

CSS教程:2个重要概念块状元素和内联元素

CSS教程:2个重要概念块状元素和内联元素网页制作Webjx文章简介：是在CSS布局页面中很重要的两个概念，必须要理解透彻！在用CSS布局页面的时候，我们会将HTML标签分成两种，块状元素和内联元素。既然说到概念就先看看块状元素和内联元素的定义。常见块状元

xiaohuli / 0评论 2013-04-23

CSS块级元素与内联元素【转】

看过O'Reilly的《CSS权威指南》，发现里面提到的文档流概念让我很敏感。可恶的是书中并没有解释文档流是什么东西，或许作者觉得这个太简单了以至于不值一提。理解了它，一堆CSS布局的理论都 变得易于理解，并且体会到CSS这套设计的合理性所在。文档流将窗体

wolaizheli / 0评论 2012-11-29

CSS内联还是外联？

现在是一个推崇结构，表现，行为想分离的时代，最大的好处就是维护起来比较简单，方便，代码重用。把CSS，JS写在HTML里，就像一个大杂烩，很难理解，可读性差，文件大，维护起来非常麻烦。我们知道HTTP请求是比较昂贵的，CSS内联的话肯定会更快，因为把CSS

Alisa0 / 0评论 2012-09-24

css position, display, float 内联元素、块级元素

position属性：position属性指出一个元素的定位方法。有4种可能值：static,relative,absoluteorfixed：。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可

opspider / 0评论 2012-06-18

详解CSS布局设计块元素和内联元素

块元素一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P。"form"这个块元素比较特殊，它只能用来容纳其他块元素。如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排

css教程 / 0评论 2011-08-21

css中display：inline

和display:inline对应的是display:block，block会让应用了该CSS属性的HTML标记变成块级别元素，例如SPAN是行内显示的，但是你加了display:block属性就不一样了。inline是自动排为一行，就象段内的文字一样，可

沉着前进 / 0评论 2011-07-22

避免CSS或JS代码内联代码的陷阱

过度使用内联CSS或JS代码，而不是通过静态资源提供代码，可能会损害网站的性能，我们将学习如何通过静态文件加载动态代码，避免内联代码过多的缺点。我们一般都认为内联JS和CSS代码并不总是理想的，因为必须将代码重复发送到客户端，如果代码量很大，则可能会对性能

hjfbluesky / 0评论 2019-01-31

浅析jQuery移动开发中内联按钮和分组按钮的编写

内联按钮 data-inline=true默认情况下，在体内含量的所有按钮都称为块级元素，所以他们填补了屏幕的宽度。但是，如果你想让按钮外观紧凑，宽度只符合里面的文字和icon，那就给按钮添加data-inline="true"的属性。

80991930 / 0评论 2019-04-23

两大CSS显示属性display block和inline区别

本文向大家简单介绍一下CSSdisplay block和CSS display inline的区别，块元素一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签＇P；而内联元素一般都是基于语义级的基本元素。&

tivon仔 / 0评论 2010-09-16

探究CSS display:inline|block|inline-block差异

旁边的内联对象会被呈递在同一行内，允许空格。◆CSS display:inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

林一天 / 0评论 2010-09-16

CSS中块元素和内联元素的区别

CSS块元素一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳CSS内联元素和其他CSS块元素,常见块元素是段落标签'P"。“form"这个块元素比较非凡，它只能用来容纳其他块元素。假如没有CSS的作用，CSS块元素会顺序以每

AloneDonkey / 0评论 2010-09-08

ppk谈JavaScript style属性

事实上，7个范例脚本都用到了某种形式的CSS修改。“下拉菜单”通过改变样式来显示和隐藏菜单项。大多数的CSS改变脚本，都采用修改style属性或改变class或id的方式。我们将在本章中逐个研究这些方法及它们适用的场合。CSS提供4种方式来给元素定义样式表

猫儿不熊 / 0评论 2008-10-10

CSS中block和inline元素的差别

我们首先要了解，所有的html元素，都要么是block(块元素)、要么是inline。总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。高，行高及顶和底边距不可改变；◆内联元素一般都是基于语义级的基本元素。

hitris / 0评论 2010-09-03

块元素block element和内联元素inline element

内联级元素中试图插入块级元素。这样做是不允许的。唯一的能在内联元素中插入块级元素的例外是object标签。块元素一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"。“form"

ljwJosie / 0评论 2006-09-24

块元素block element和内联元素inline element

内联级元素中试图插入块级元素。这样做是不允许的。唯一的能在内联元素中插入块级元素的例外是object标签。块元素一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"。

blive / 0评论 2006-09-24

CSS（四）

css元素溢出当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。overflow的设置项：1、visible 默认值。块元素、内联元素、内联块元素元素就是标签，布局中常用的有三种标签，块元素

人生没有加命蘑菇 / 0评论 2018-05-15

CSS基础：内联元素

内联元素由于涉及到文本字体，读写方向，汉字和字母差异等诸多方面的影响，因此其盒模型比块级元素更加复杂，对于内联非替换元素，比如一行文本，主要由以下几种框构成：。“行内框”，与 "em框" 不同，行内框的高度是由 "line-h

图月志 / 0评论 2018-04-16

元素类型知多少

也称为行元素，布局中常用的标签如：div p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：。b、宽高由内容决定。d、代码换行，盒子之间会产生间距。e、子元素是内联元素，父元素可以用text-align属性设置子元素的水平对齐方

网络游戏 / 0评论 2017-07-04

html5 区块与内联div 与span html块级元素

HTML列表HTML类可以通过 <div> 和 <span> 将 HTML 元素组合起来。大多数HTML元素被定义为块级元素或内联元素。内联元素在显示时通常不会以新行开始。<div>元素没有特定的含义。如果与CSS一同使

软件设计 / 0评论 2017-06-19

css盒模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间

软件设计 / 0评论 2017-04-01

5、块元素与内联元素之间的转换

关于块级元素与内联元素之间的转换我们可以使用css解决，使用CSS以后块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上d

软件设计 / 0评论 2017-03-30

块元素block element和内联元素inline element

内联级元素中试图插入块级元素。这样做是不允许的。唯一的能在内联元素中插入块级元素的例外是object标签。块元素一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"。另外提到内联元素，我们

HTML CSS / 0评论 2016-10-18

块元素block element和内联元素inline element

内联级元素中试图插入块级元素。这样做是不允许的。唯一的能在内联元素中插入块级元素的例外是object标签。块元素一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"。另外提到内联元素，我们

DIVCSS / 0评论 2016-10-17