Style currentStyle computedStyle 和 runtimeStyle 的区别

最新推荐文章于 2020-07-18 08:56:18 发布

caiqcong

最新推荐文章于 2020-07-18 08:56:18 发布

阅读量2.7k

点赞数

分类专栏： JS 文章标签： styles css 浏览器 javascript float html

本文链接：https://blog.csdn.net/caiqcong/article/details/7766211

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

内嵌样式（inlineStyle）：是写在Tag里面的，内嵌样式只对所有的Tag有效。

<P style="font-size:20pt; color:red">AAAA</p>

这个Style定义<p></p>里面的文字是20pt字体，字体颜色是红色。

内部样式（internal Style Sheet）：是写在HTML的<head></head>里面的，内部样式只对所在的网页有效。

<HTML> 
    <HEAD> 
          <STYLE type="text/css"> 
             H1.mylayout {border-width:1; border:solid; text-align:center; color:red} 
          </STYLE> 
   </HEAD> 
   <BODY> 
           <H1 class="mylayout"> 这个标题使用了Style。</H1> 
           <H1>这个标题没有使用Style。</H1> 
   </BODY> 
</HTML>

外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

  <HEAD> 
         <link href="../asdocs/css_tutorials/home.css" rel="stylesheet"type="text/css"> 
  </HEAD>

CSS第一个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。

样式(Styles)的优先级依次是内嵌(inline), 内部(internal),外部(external),浏览器缺省(browserdefault)。

假设内嵌(Inline)样式中有font-size:30pt,而内部(Internal)样式中有font-size:12pt，那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。

Style为内嵌样式

runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！

currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。

当指定了runtimeStyle，那么当前显示的样式以runtimeStyle为准，如果取消了runtimeStyle，那么当前显示样式就恢复到currentStyle的样式。

ComputedStyle 计算样式可以通过document.defaultView.getComputedStyle()方法获取，该方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算样式。该方法接受两个参数，第一个目标元素，第二个是伪元素字符串(例如”:after”)，可以是null，使用方法如下(仍以上面的html为例)：

var ele = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(ele,null);
alert(computedStyle.width);//"100px"
alert(computedStyle.backgroundColor);//"red" | "rgb(255,0,0)" 等(看浏览器实现)
alert(computedStyle.border);//在某些浏览器中可能是"1px solid black"
computedStyle.width = "200px";//错误

上面对于css中用短线(‘-’)连接的属性无法直接访问，需要通过Pascal命名规范来访问，不过有些属性无法访问(稍后介绍)。其中border由于是复合属性所以部分浏览器中无法访问，不过可以使用相应的borderTopWidth等细化属性来访问。最后引发错误是因为计算样式是只读的。如果需要修改样式貌似只能通过DOM元素的style属性进行修改。但是IE不支持getComputedStyle()方法，不过IE给每个拥有style属性的元素实现了currentStyle(CSSStyleDeclaration对象)属性，可以获取到计算样式。使用方法更简单：

//将上面的document.defaultView.getComputedStyle(ele,null)改为：
var computedStyle = ele.currentStyle;

不过对于css中的float属性，由于JavaScript将float作为保留字，所以不能将其用作属性名，因此有了替代者，在IE中是”styleFloat”,而在FireFox、Safari、Opera和Chrome中则是”cssFloat”。

所以基于兼容性的考虑可以将样式操作改为如下形式：

//element:需要获取样式的目标元素;name:样式属性
function getStyle(element,name){
  var computedStyle;
  try{
    computedStyle = document.defaultView.getComputedStyle(element,null);
  }catch(e){
    computedStyle = element.currentStyle;
  }
  if(name != "float"){
    return computedStyle[name];
  }
  else{
    return computedStyle["cssFloat"] || computedStyle["styleFloat"];
  }
}
//element:需要设置样式的目标元素;name:样式属性;value:设置值
function setStyle(element,name,value){
  if(name != "float"){
    element.style[name] = value;
  }
  else{
    element.style["cssFloat"] = value;
    element.style["styleFloat"] = value;
  }
}

上面的代码可以跨浏览器实现操作某个元素的css。当然你可以使用jQuery的css(name,value)函数来更方便的实现以上操作。

CSS Properties To JavaScript ReferenceConversion

CSS Property	JavaScript Reference
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
overflow	overflow
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
page-break-after	pageBreakAfter
page-break-before	pageBreakBefore
position	position
float	styleFloat
text-align	textAlign
text-decoration	textDecoration
text-decoration: blink	textDecorationBlink
text-decoration: line-through	textDecorationLineThrough
text-decoration: none	textDecorationNone
text-decoration: overline	textDecorationOverline
text-decoration: underline	textDecorationUnderline
text-indent	textIndent
text-transform	textTransform
top	top
vertical-align	verticalAlign
visibility	visibility
width	width
z-index	zIndex

caiqcong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Style currentStyle computedStyle 和 runtimeStyle 的区别

内嵌样式（inlineStyle）：是写在Tag里面的，内嵌样式只对所有的Tag有效。AAAA这个Style定义里面的文字是20pt字体，字体颜色是红色。内部样式（internal Style Sheet）：是写在HTML的里面的，内部样式只对所在的网页有效。 H1.mylayout {border-width:
复制链接

扫一扫

专栏目录