用JavaScript修改CSS属性

sssschenyi 2009-12-20 10:58:05
今天去baidu提问的时候看到baidu的css智能提示觉得很人化,这不回头就写了一个。给大家看看!
请多多指教!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
exmpall
</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<STYLE type="text/css">
div{
padding: 0;
margin: 0;
position: absolute;
left:200px; /*左边*/
top:0; /*上面*/
display: none;
width: 180px;
height: 150px;
border-style: solid;
border-color: #E6C963;
border-width: thin;
}
</STYLE>
<SCRIPT TYPE="text/javascript">
<!--
function myfunction1()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "50px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#E4A17C";
}

function myfunction2()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "150px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#A3935F";
}

function myfunction3()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "200px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#79851A";
}

function myfunction4()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "300px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#ACACA9";
}

function myfunction5()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "400px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#B38DD9";
}
// -->
</SCRIPT>
</head>

<body>
<FORM method="post" action="">
<br /><br />
<INPUT name="text1" type="text" onmouseover="myfunction1()"><br /><br /><br /><br />
<INPUT name="text2" type="text" onmouseover="myfunction2()"><br /><br /><br /><br />
<INPUT name="text3" type="text" onmouseover="myfunction3()"><br /><br /><br /><br />
<INPUT name="text4" type="text" onmouseover="myfunction4()"><br /><br /><br /><br />
<INPUT name="text5" type="text" onmouseover="myfunction5()"><br /><br />
</FORM>
<div id="chenyi">
<ol>
<li><a href="http://hi.baidu.com/515314237/blog/item/88e8844ab0f667fb83025cf8.html">高兴</a></li>
<li>php</li>
<li>asp.net</li>
<li>javaEE</li>
<li>javascript</li>
</ol>
</div>
</body>
</html>
...全文
293 15 打赏 收藏 举报
写回复
15 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
晨枫 2011-05-10
  • 打赏
  • 举报
回复
这个没什么啊,而且有点麻烦,我记得好像有个符号可以多个属性值写在一起的,像你这样的话实在是有些繁杂。
feilong520163 2009-12-21
  • 打赏
  • 举报
回复
支持
xzq211314 2009-12-21
  • 打赏
  • 举报
回复
学习下
蓝胖学长 2009-12-21
  • 打赏
  • 举报
回复
不错,很实用
Click_Me 2009-12-21
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 dh20156 的回复:]
建议:楼主可以将这5个function抽象为一个。 ^_^
[/Quote]
然后 控制style用 cssText要好些..
dh20156 2009-12-21
  • 打赏
  • 举报
回复
建议:楼主可以将这5个function抽象为一个。 ^_^
街头小贩 2009-12-21
  • 打赏
  • 举报
回复
支持一下
xmliy 2009-12-21
  • 打赏
  • 举报
回复
对于第一个例子


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>exmpall</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<style type="text/css">
div
{
display: none;
padding: 0;
margin: 0;
position: absolute;
left: 200px; /*左边*/
top: 0; /*上面*/
width: 180px;
height: 150px;
border-style: solid;
border-color: #E6C963;
border-width: thin;
}
</style>
</head>

<body>
<form method="post" action="">
<br /><br />
<input name="text1" type="text" onmouseover="myFunction(this, '#E4A17C')" /><br /><br /><br /><br />
<input name="text2" type="text" onmouseover="myFunction(this, '#A3935F')" /><br /><br /><br /><br />
<input name="text3" type="text" onmouseover="myFunction(this, '#79851A')" /><br /><br /><br /><br />
<input name="text4" type="text" onmouseover="myFunction(this, '#ACACA9')" /><br /><br /><br /><br />
<input name="text5" type="text" onmouseover="myFunction(this, '#B38DD9')" /><br /><br />
</form>
<div id="chenyi">
<ol>
<li><a href="http://hi.baidu.com/515314237/blog/item/88e8844ab0f667fb83025cf8.html">高兴</a></li>
<li>php</li>
<li>asp.net</li>
<li>javaEE</li>
<li>javascript</li>
</ol>
</div>
</body>
</html>

<script type="text/javascript">
<!--

function myFunction(elem, color) {
var me = document.getElementById('chenyi');
me.style.top = getOffset(elem);
me.style.backgroundColor = color;
me.style.display = 'inline';
}

function getOffset(elem) {
var offset = 0;
while (elem.tagName != 'BODY') {
offset += elem.offsetTop;
elem = elem.parentNode;
}
return offset;
}

// -->
</script>
sssschenyi 2009-12-21
  • 打赏
  • 举报
回复
[Quote=引用 10 楼 sssschenyi 的回复:]
再给一个实例HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>
exmpall</title><metacontent="text/html; charset=utf-8" http-equiv="content-type"/><STYLEtype="text/css">
.chenyi{
padding: 0;
margin: 0;
background-image: url(http://www.stnn.cc/ent_focus/200804/W020080424340598607889.jpg);/*设置默认图片*/
width: 300px;/**/
height: 300px;
border-style: solid;
border-color: #E6C963;
border-width: thin;
cursor:pointer;}

ul{
list-style-type: none;/*取消li前面的园点*/}


.li1{
position:absolute;
left: 200px;/*li 区块大小*/
top:290px;
text-align:center;/*li文本居中*/
width: 15px;/*li 大小*/
height: 15px;/*li 大小*/
border-style: solid;/*li 边框样式*/
border-color: #F2D8CA;/*li 边框color*/
border-width: thin;/*设置li 边框线条*/}

.li2{
position:absolute;
left: 220px;
top:290px;
text-align:center;
width: 15px;
height: 15px;
border-style: solid;
border-color: #F2D8CA;
border-width: thin;}

.li3{
position:absolute;
left: 240px;
top:290px;
text-align:center;
width: 15px;
height: 15px;
border-style: solid;
border-color: #F2D8CA;
border-width: thin;}</STYLE><SCRIPTTYPE="text/javascript"><!--function li1()/*触发click事件,改变第一张图片*/
{var my=document.getElementById("chenyi");
my.style.backgroundImage="url(http://www.stnn.cc/ent_focus/200804/W020080424340598607889.jpg)";
document.getElementById("li1").style.color="#FF0300";
document.getElementById("li2").style.color="#000000";
document.getElementById("li3").style.color="#000000";
}function li2()/*触发click事件,改变第二张图片*/
{var my=document.getElementById("chenyi");
my.style.backgroundImage="url(http://images.qianlong.com/mmsource/images/2008/01/20/ylhj081200049.jpg)";
document.getElementById("li1").style.color="#000000";
document.getElementById("li2").style.color="#FF0300";
document.getElementById("li3").style.color="#000000";
}function li3()/*触发click事件,改变第三张图片*/
{var my=document.getElementById("chenyi");
my.style.backgroundImage="url(http://www.ptwbs.net/uploadfile/article/uploadfile/200712/20071227094604381.jpg)";
document.getElementById("li1").style.color="#000000";
document.getElementById("li2").style.color="#000000";
document.getElementById("li3").style.color="#FF0300";
}// --></SCRIPT></head><body><divid="chenyi" class="chenyi"><ul><liid="li1" class="li1" onclick="li1()">1</li><liid="li2" class="li2" onclick="li2()">2</li><liid="li3" class="li3" onclick="li3()">3</li></ul></div></body></html>
[/Quote]

请多多指教!!!
sssschenyi 2009-12-21
  • 打赏
  • 举报
回复
再给一个实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
exmpall
</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<STYLE type="text/css">
.chenyi {
padding: 0;
margin: 0;
background-image: url(http://www.stnn.cc/ent_focus/200804/W020080424340598607889.jpg);/*设置默认图片*/
width: 300px;/**/
height: 300px;
border-style: solid;
border-color: #E6C963;
border-width: thin;
cursor:pointer;
}

ul{
list-style-type: none;/*取消li前面的园点*/
}


.li1{
position:absolute;
left: 200px;/*li 区块大小*/
top:290px;
text-align:center;/*li文本居中*/
width: 15px;/*li 大小*/
height: 15px;/*li 大小*/
border-style: solid;/*li 边框样式*/
border-color: #F2D8CA;/*li 边框color*/
border-width: thin;/*设置li 边框线条*/
}

.li2 {
position:absolute;
left: 220px;
top:290px;
text-align:center;
width: 15px;
height: 15px;
border-style: solid;
border-color: #F2D8CA;
border-width: thin;
}

.li3 {
position:absolute;
left: 240px;
top:290px;
text-align:center;
width: 15px;
height: 15px;
border-style: solid;
border-color: #F2D8CA;
border-width: thin;
}
</STYLE>
<SCRIPT TYPE="text/javascript">
<!--
function li1() /*触发click事件,改变第一张图片*/
{
var my=document.getElementById("chenyi");
my.style.backgroundImage="url(http://www.stnn.cc/ent_focus/200804/W020080424340598607889.jpg)";
document.getElementById("li1").style.color = "#FF0300";
document.getElementById("li2").style.color = "#000000";
document.getElementById("li3").style.color = "#000000";
}
function li2() /*触发click事件,改变第二张图片*/
{
var my=document.getElementById("chenyi");
my.style.backgroundImage="url(http://images.qianlong.com/mmsource/images/2008/01/20/ylhj081200049.jpg)";
document.getElementById("li1").style.color = "#000000";
document.getElementById("li2").style.color = "#FF0300";
document.getElementById("li3").style.color = "#000000";
}
function li3()/*触发click事件,改变第三张图片*/
{
var my=document.getElementById("chenyi");
my.style.backgroundImage="url(http://www.ptwbs.net/uploadfile/article/uploadfile/200712/20071227094604381.jpg)";
document.getElementById("li1").style.color = "#000000";
document.getElementById("li2").style.color = "#000000";
document.getElementById("li3").style.color = "#FF0300";
}
// -->
</SCRIPT>
</head>

<body>
<div id="chenyi" class="chenyi">
<ul>
<li id="li1" class="li1" onclick="li1()">1</li>
<li id="li2" class="li2" onclick="li2()">2</li>
<li id="li3" class="li3" onclick="li3()">3</li>
</ul>
</div>
</body>
</html>
sssschenyi 2009-12-21
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 huing 的回复:]
引用 5 楼 sssschenyi 的回复:
引用 2 楼 dh20156 的回复:
建议:楼主可以将这5个function抽象为一个。 ^_^

例如


style先定义好,然后function myfunction(idx)改为带参数的,然后对其class赋值
[/Quote]

哥们,我新手,不懂你啥意思,要不帮忙把上面的CODE给改改!谢谢!
passself 2009-12-21
  • 打赏
  • 举报
回复
用相同的class就可以了
huing 2009-12-21
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 sssschenyi 的回复:]
引用 2 楼 dh20156 的回复:
建议:楼主可以将这5个function抽象为一个。 ^_^

例如
[/Quote]

style先定义好,然后function myfunction(idx)改为带参数的,然后对其class赋值
sssschenyi 2009-12-21
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 dh20156 的回复:]
建议:楼主可以将这5个function抽象为一个。 ^_^
[/Quote]
例如
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2009-12-20 10:58
社区公告
暂无公告