用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修改CSS属性的代码
用JavaScript修改CSS属性的代码 作者： 字体：[增加 减小] 类型：转载 时间：2013-05-06 我要评论 这篇文章主要介绍用原生的javascript修改CSS属性的方法，需要的朋友可以参考下 用JavaScript修改CSS属性 只有写原生的javascript了。 1.用JS修改标签的 class 属性值： class 属性是在标签上引用样式表的方...
JavaScript修改CSS属性的实例代码
JavaScript修改CSS属性的实例代码 用原生的javascript修改CSS属性的方法。用JavaScript修改CSS属性 只有写原生的javascript了。1.用JS修改标签的 class 属性值：class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也...
发帖
JavaScript

8.7w+

社区成员

22.4w+

社区内容

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