JavaScript是如何改变网页的CSS样式的?

JavaScript015

JavaScript是如何改变网页的CSS样式的?,第1张

通常我们将网页的样式和内容分开,样式放在css文件,内容放在html文件,当html文件需要用到样式的时候,直接引用css中定义的样式就可以了。其实JavaScript也能使用css文件或直接改变样式的属性来动态的改变网页的样式。

1、JavaScript设置内联样式

改变样式最直接的方法就是改变元素节点的style属性。如:

myElement.sytle.color = “red”

myElement.sytle.left = “40px”

myElement.sytle.backgroundRepeat = “repeat-x”

JavaScript设置内联样式时,采用和css设置样式一样的风格。如设置myElement的color属性时,我们可以赋值任何在css中可以用的值,所以这里除了可以使用”red”,还可以使用”blue”, ”yellow”或十六进制的”#ff0000”。

另外用JavaScript改变网页的属性还需要注意2点:

l JavaScript中采用驼峰命名法:在css中,属性名中的单词之间是用横杠隔开,如font-weight, background-color。但在JavaScript中,横杠可能被认为是减号,所以采用驼峰命名法,单词之间不用横杠,如font-weight在JavaScript中应该写成fontWeight而background-color写成backgroundColor。

l JavaScript中属性值为字符串:在css中,属性值都写在双引号中,即要用字符串来给css相关属性赋值,同样当属性值有单位时,我们需要将单位也写在字符串中。

2、JavaScript设置外部样式

当你需要改变的样式已经在css文件中定义了,我们也可以用JavaScript直接用定义好的css样式。如下格式:

myElement.className = “someCSSclass”

同样需要注意几点:

l 不要将className写成class,因为class是JavaScript保留的关键字,我们不能使用。

l 将定义在css中的样式直接赋值给className,就能改变myElement元素的样式。

l 当要删除元素的样式,可以给className属性赋值为空。如:

myElement.className = “”

教程网 站-秒秒学上的JavaScript课程有一个章节专门讲解JavaScript改变样式的内容,可以看看,希望对你有帮助。

1.首先将以下代码插入到你body需要设置导航的地方

<div id="navmenu">

<ul id="navi">

<li><a href="index.htm" _fcksavedurl="index.htm">梧桐首页

</a></li>

<li><a href="index1.htm" _fcksavedurl="index1.htm">网站优化

</a></li>

</ul>

</div>

<script type="text/javascript" language="javascript">

var nav = document.getElementById("navi")

var links = nav.getElementsByTagName("li")

var lilen = nav.getElementsByTagName("a")//判断地址

var currenturl = document.location.href

var last = 0

for (var i=0i<links.lengthi++)

{

var linkurl = lilen[i].getAttribute("href")

if(currenturl.indexOf(linkurl)!=-1)

{

last = i

}

}

links[last].className = "navon" //高亮代码样式

</script>

2.然后将以下CSS代码添加到你网站的CSS文件中

#navmenu{ width:980px}

#navmenu ul{ padding:0pxmargin:0px}

#navmenu ul li{ float:leftwidth:80pxlist-style:none

text-align:centerheight:30pxline-height:30px}

.navon{ background:#000000} .navon a{ color:#ffffff}

看下这个吧,JS跟简单。但是没有JS,更没有DW,写不了。