JS|JS动态修改网页文件的CSS

  • 时间:2018-06-06 01:54 作者:小智雅汇 来源:小智雅汇 阅读:436
  • 扫一扫,手机访问
摘要:网页每个Element元素都有style和classname属性,能通过CSS直接设置,也允许脚本指定文档元素的CSS样式,或者修改应使用到元素上的css类名,设置这些css相关的属性会改变文档元素的呈现。1 使用JS修改标签的 class 属性值:class 属性是在标签上引使用样式表的方法之一,

网页每个Element元素都有style和classname属性,能通过CSS直接设置,也允许脚本指定文档元素的CSS样式,或者修改应使用到元素上的css类名,设置这些css相关的属性会改变文档元素的呈现。

1 使用JS修改标签的 class 属性值:

class 属性是在标签上引使用样式表的方法之一,它的值是一个样式表的选择符,假如改变了 class 属性的值,标签所引使用的样式表也就更换了。

更改一个标签的 class 属性的代码是:

document.getElementById( id ).className = 字符串;

document.getElementById( id ) 使用于获取标签对应的 DOM 对象,你也能使用其它方法获取。className 是 DOM 对象的一个属性,它对应于标签的 class 属性。字符串 是 class 属性的新值,它应该是一个已定义的CSS选择符。

利使用这种办法能把标签的CSS样式表替换成另外一个,也能让一个没有应使用CSS样式的标签应使用指定的样式。

举例1,代码如下:

欢迎光临!

举例2,代码如下:

2 使用JS修改标签的 style 属性值:

元素的style属性能直接设置元素的外观属性。Style 对象的属性和 CSS 属性是逐个对应的,能直接设置,也能通过JS动态更改。

更改一个标签的 style 属性的代码是:

document.getElementById( id ).style.属性名 = 值;

document.getElementById( id ) 使用于获取标签对应的 DOM 对象,你也能使用其它方法获取。style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相对应的。

说明:这种方法修改的单一的一个CSS属性,它不影响标签上其它CSS属性值。

举例,代码如下:

div id="t2">欢迎光临!

3 综合实例

function clk(event) {

var parent = document.getElementById("parent");

//改变className

var child0 = document.createElement("div");

child0.innerHTML = "child0";

child0.className = "newDiv";

parent.appendChild(child0);

//改变cssText

var child1 = document.createElement("div");

child1.innerHTML = "child1";

child1.style.cssText = "color:red;";

parent.appendChild(child1);

//改变直接样式

var child2 = document.createElement("div");

child2.innerHTML = "child2";

child2.style.fontSize = "28px";

parent.appendChild(child2);

}

4 JS设置CSS的语法与CSS语法的区别

盒子标签和属性对照
CSS语法(不区分大小写)JavaScript语法(区分大小写)
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
floatfloatStyle
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
颜色和背景标签和属性对照
CSS 语法(不区分大小写)JavaScript 语法(区分大小写)
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
colorcolor


样式标签和属性对照
CSS语法(不区分大小写)JavaScript 语法(区分大小写)
displaydisplay
list-style-typelistStyleType
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-stylelistStyle
white-spacewhiteSpace


文字样式标签和属性对照
CSS 语法(不区分大小写)JavaScript 语法(区分大小写)
fontfont
font-familyfontFamily
font-sizefontSize
font-stylefontStyle
font-variantfontVariant
font-weightfontWeight


文本标签和属性对照
CSS 语法(不区分大小写)JavaScript 语法(区分大小写)
letter-spacingletterSpacing
line-breaklineBreak
line-heightlineHeight
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-justifytextJustify
text-transformtextTransform
vertical-align

verticalAlign

从上表能看出,两者的写法区别在于CSS是不区分大小写的,所以两个英文字中间使用了一个横杠"-",使用JS区分大小写,所以不使用横杠"-",而使用英文的小驼峰式命名法(lower camel case,第一个单字以小写字母开始,第二个单字的首字母大写)。

-End-

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)
【系统环境|】Web前端为什么那么好(2019-08-27 18:20)
手机二维码手机访问领取大礼包
返回顶部