大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。
CSS分类
排队:
<div id="box" style="width:200px;border:1px solid red color:red;font-size:16px;"></div>
内联:在HTML的头部一般为例如以下格式
<styletype=”text/css”> div.test{ background-color:red; height:10px; width:10px; margin:10px; } </style>
链接:在HTML中引入一个单独的CSS文件。格式例如以下
<linkrel="stylesheet" type="text/css"href="xx.css"/>
首先总体的看一下JS对CSS的操作
JS能够对行内样式进行获取和设置
在HTML中每一个元素都有一个属性对象style,该对象包括了该元素的全部的css样式。这样的CSS样式称为内嵌样式,例如以下
<div id="box" style="width:200px;border:1px solid red color:red;font-size:16px;"></div> var box = document.getElementById('box');//获得id为box的元素节点 alert(box.style); //CSSStyleDeclaration对象 alert(box.style.color); //red alert(box.style.width);
注意:在CSS中假设出现类型font-size的属性在JS中把-号去掉,后面的字符大写,写成alert(box.style.fontSize);
利用JS的style能够获得全部设置过的属性值。
也能够设置属性值。
box.style.color=green;//将颜色改为绿色 box.style.height=12px;//也能够设置没有的属性
DOM2级还为style定义了一些属性和方法
removeProperty(name)——移除指定的属性 setProperty(name,value,position)——给指定的属性设置值
可是通过style仅仅可以获得行内的css样式,假设使用内联或链接的则无法获得。在非IE中可以使用getComputedStyle()在IE中使用currentStyle()属性。这两个方法仅仅可以获得。
JS对内联及链接样式进行获取和设置
对这两种样式的操作时是通过CSSStyleSheet对象进行.对该对象的获取有两种方式
方法一:先获得元素,然后获得该对象
在IE中通过sheet属性获得。在非IE中通过styleSheet获得。
var link = document.getElementsByTagName('link')[0];//通过标签面获得全部的链接的css样式然后去第一个var sheet = link.sheet || link.styleSheet;//通过sheet或styleSheet获CSSStyleSheet对象
方法二
通过doucument中的styleSheets直接获得。返回的是个数值,它兼容全部的浏览器。
var sheet=document.styleSheets[0];
CSSStyleSheet有一些属性和方法能够操作外联的样式,经常使用的“增”和“删”,可是IE和非IE是不兼容的,所以须要自己写函数进行兼容。假设要“改”CSS中的样式则能够使用CSSRules,对CSS文件里的某一条规则进行改动。
小结
CSS一共三种样式。DOM操作能够分为两个大类。行内的使用style可读可写,内联和链接的使用getComputedStyle或currentStyle仅仅能读。假设使用CSSStyleSheet对象下的CSSRules对象则能够对指定的CSS规则进行读和写。
版权声明:本文博主原创文章,博客,未经同意不得转载。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116994.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...