js怎么修改css中带减号的样式

html-css07

js怎么修改css中带减号的样式,第1张

一般是把"-"去掉再把第二个以后的单词首字母改成大写就行了,

element.style.fontSize

element.style.marginTop

element.style.borderLeftColor等

（1）1、js方法，这是一般网站常用的方法。

优点：兼容性好，易管理。

实现方式：按钮

onclick

触发

目标div

显示/隐藏。

代码有很多。

2、纯css方法：这是为了应付考试，掌握灵活性而用

缺点：需要支持css3的浏览器，兼容性不佳。

实现方法：利用css的伪类选择，将整个一体放到一个div中，包括

触发按钮、标题、内容。在div的css上写高度、overflow:hidden，在hover或active伪类上写新的高度即可，并不太实用。特意为你写的示例：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

#box { width:400pxheight:30pxborder:1px #666666 solidpadding:10pxoverflow:hidden}

#box h5{ border:1px #666666 solidheight:30pxmargin:0padding:0}

#box p{ border:1px #666666 solid}

#box:hover { height:100px}

</style>

</head>

<body>

<div id="box">

<h5>+ 标题</h5>

<p>这里是内容，也可以用 #box:active { height:100px}，这是鼠标按下的效果。</p>

</div>

</body>

</html>

（2）CSS是用级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<script type=text/javascript><!--//--><![CDATA[//><!--

function menuFix() {

var sfEls = document.getElementById("menu").getElementsByTagName("li")

for (var i=0i<sfEls.lengthi++) {

sfEls[i].onmouseover=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseDown=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseUp=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"")

}

}

}

window.onload=menuFix

//--><!]]></script>

<style type="text/css">

body

a

a:hover

#menu

#menu ul

#menu ul li

#menu ul li a

#menu ul li a:hover

#menu ul li a#current

#menu ul li ul

#menu ul li ul li

#menu ul li ul li a

#menu ul li ul li a:hover

#menu ul li:hover ul

#menu ul li.sfhover ul

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a id="current" href="#">首页</a>

<ul>

<li><a href="#">下拉1</a></li>

<li><a href="#">下拉1</a></li>

</ul>

</li>

<li><a href="#">网页版式</a>

<ul>

<li><a href="#">下拉2</a></li>

<li><a href="#">下拉2</a></li>

</ul>

</li>

<li><a href="#">web教程</a>

<ul>

<li><a href="#">下拉3</a></li>

<li><a href="#">下拉3</a></li>

<li><a href="#">下拉3</a></li>

</ul>

</li>

<li><a href="#">web实例</a>

<ul>

<li><a href="#">下拉4</a></li>

<li><a href="#">下拉4</a></li>

<li><a href="#">下拉4</a></li>

</ul>

</li>

<li><a href="#">常用代码</a></li>

</ul>

</div>

</body>

</html>