这样的效果如何实现? 多写几个CSS,当点击时替换CSS 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 不太明白.我要一个方法,当点不同的连接时动态设置CSS的width <html> <head> <style> .bor{ width:50 } </style> <script> function changeCss(obj) { var oStyleSheet=document.styleSheets[0]; var oRule=oStyleSheet.rules[0]; oRule.style.width=obj*10; } </script> </head><body><a href="#" onclick="changeCss(this.innerText)">1 </a> <a href="#" onclick="changeCss(this.innerText)">2 </a> <a href="#" onclick="changeCss(this.innerText)">3 </a> <a href="#" onclick="changeCss(this.innerText)">4 </a> <a href="#" onclick="changeCss(this.innerText)">5 </a> <input class="bor" /></body></html> <style> .bor1{ width:10}.bor2{ width:20}.bor3{ width:30}.bor4{ width:40}.bor5{ width:50}</style> <a href="#" onclick="this.className='bor1';">1 </a> <a href="#" onclick="this.className='bor2';">2 </a> <a href="#" onclick="this.className='bor3';">3 </a> <a href="#" onclick="this.className='bor4';">4 </a> <a href="#" onclick="this.className='bor5';">5 </a> 谢谢楼上.但得到的效果不对...我的代码是下面这样的.也就是用width的宽度来固定住点击后的效果.CSS:.star-rating li.current-rating{background: url(star_rating2.gif) left bottom;position: absolute;width:150px;/*30是显示1颗星,60是2颗...*/height: 30px;display: block;text-indent: -9000px;z-index: 1;}js:function changeCss(obj) { var oStyleSheet=document.styleSheets[0]; var oRule=oStyleSheet.rules[0]; oRule.style.width=obj*30; }html:<a href="#" onclick="changeCss(this.innerText)">1 </a> <a href="#" onclick="changeCss(this.innerText)">2 </a> <a href="#" onclick="changeCss(this.innerText)">3 </a> <a href="#" onclick="changeCss(this.innerText)">4 </a> <a href="#" onclick="changeCss(this.innerText)">5 </a> <input class="bor" /> 没听懂,不知什么星不星的,我只是写个例子,var oStyleSheet=document.styleSheets[0]; var oRule=oStyleSheet.rules[0]; 都是取的第一个style的第一个规则,你应该根据实际需要改的,不行,把代码发过来看吧,我发消息给你了,在帖子上沟通太慢 我还是把全部CSS贴出来吧<style type="text/css">.star-rating{list-style:none;margin: 0px;padding:0px;width: 150px;height: 30px;position: relative;background: url(star_rating2.gif) top left repeat-x; }.star-rating li{padding:0px;margin:0px;/*\*/float: left;/* */}.star-rating li a{display:block;width:30px;height: 30px;text-decoration: none;text-indent: -9000px;z-index: 20;position: absolute;padding: 0px;}.star-rating li a:hover{background: url(star_rating2.gif) left center;z-index: 2;left: 0px;}.star-rating a.one-star{left: 0px;}.star-rating a.one-star:hover{width:30px;}.star-rating a.two-stars{left:30px;}.star-rating a.two-stars:hover{width: 60px;}.star-rating a.three-stars{left: 60px;}.star-rating a.three-stars:hover{width: 90px;}.star-rating a.four-stars{left: 90px;} .star-rating a.four-stars:hover{width: 120px;}.star-rating a.five-stars{left: 120px;}.star-rating a.five-stars:hover{width: 150px;}.star-rating li.current-rating{background: url(star_rating2.gif) left bottom;position: absolute;width:30px;height: 30px;display: block;text-indent: -9000px;z-index: 1;}</style> 你要设谁的宽度呀,你开始说要css那的值动态改但现在看你的意思是,点哪个链接,哪个链接的宽度相应变化,是这个意思吗?你不能把功能描述的清楚吗?呵呵,当然了,这样也好,我可以多水几帖了 我给你发的消息发不全,还是贴代码吧...<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>评分</title><style type="text/css">.star-rating{list-style:none;margin: 0px;padding:0px;width: 150px;height: 30px;position: relative;background: url(star_rating2.gif) top left repeat-x; }.star-rating li{padding:0px;margin:0px;/*\*/float: left;/* */}.star-rating li a{display:block;width:30px;height: 30px;text-decoration: none;text-indent: -9000px;z-index: 20;position: absolute;padding: 0px;}.star-rating li a:hover{background: url(star_rating2.gif) left center;z-index: 2;left: 0px;}.star-rating a.one-star{left: 0px;}.star-rating a.one-star:hover{width:30px;}.star-rating a.two-stars{left:30px;}.star-rating a.two-stars:hover{width: 60px;}.star-rating a.three-stars{left: 60px;}.star-rating a.three-stars:hover{width: 90px;}.star-rating a.four-stars{left: 90px;} .star-rating a.four-stars:hover{width: 120px;}.star-rating a.five-stars{left: 120px;}.star-rating a.five-stars:hover{width: 150px;}.star-rating li.current-rating{background: url(star_rating2.gif) left bottom;position: absolute;width:0px;height: 30px;display: block;text-indent: -9000px;z-index: 1;}</style><script type="text/javascript"> function setValue(theValue){ document.getElementById("Text1").value = theValue;}</script></head><body> <form id="form1" runat="server"> <div> <ul class="star-rating"> <li class="current-rating">Currently 0/5 Stars.</li> <li><a href="#" title="1 star out of 5" class="one-star" onclick="setValue(this.innerHTML);">1</a></li> <li><a href="#" title="2 stars out of 5" class="two-stars" onclick="setValue(this.innerHTML);">2</a></li> <li><a href="#" title="3 stars out of 5" class="three-stars" onclick="setValue(this.innerHTML);">3</a></li> <li><a href="#" title="4 stars out of 5" class="four-stars" onclick="setValue(this.innerHTML);">4</a></li> <li><a href="#" title="5 stars out of 5" class="five-stars" onclick="setValue(this.innerHTML);">5</a></li> </ul> <input id="Text1" type="hidden" runat="server" maxlength="1" readonly="readOnly" size="1" /> </div> </form></body></html>上面就是全部代码了图片地址:http://www.jscode.cn/JsCode/images/star_rating2.gif其中CSS里面的.star-rating li.current-rating的第三个属性width可以控制显示的星级效果.30=1星,60=2星....我要实现点击连接1可以把width设置为30px...也就是上面已经写好的代码不能固定住点击的效果,我想通过动态设置width来控制住点击后的效果... Extjs4.07 如何让一个msg弹出框在打开后几秒自动关闭! js基础问题 getElementById()使用 关于js创建层的问题 大家帮我看看这个问题 struts select onchange(参数1,参数2,参数3)如何传参 想把一段代码保存,不知用何方法? 请问有没有csdn论坛左边树型目录的源代码? FORM表单中回车键的问题? 请问!form表单里面action能不能向子窗口传递变量!例如action=index.asp?code=1 急!!跳转问题,如果是错误信息就不提交到对应的页面! 这个js判断怎么理解?
<head>
<style>
.bor{
width:50
}
</style>
<script>
function changeCss(obj)
{
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.width=obj*10;
}
</script>
</head>
<body>
<a href="#" onclick="changeCss(this.innerText)">1 </a>
<a href="#" onclick="changeCss(this.innerText)">2 </a>
<a href="#" onclick="changeCss(this.innerText)">3 </a>
<a href="#" onclick="changeCss(this.innerText)">4 </a>
<a href="#" onclick="changeCss(this.innerText)">5 </a> <input class="bor" />
</body>
</html>
.bor1{
width:10
}
.bor2{
width:20
}
.bor3{
width:30
}
.bor4{
width:40
}
.bor5{
width:50
}
</style>
<a href="#" onclick="this.className='bor1';">1 </a>
<a href="#" onclick="this.className='bor2';">2 </a>
<a href="#" onclick="this.className='bor3';">3 </a>
<a href="#" onclick="this.className='bor4';">4 </a>
<a href="#" onclick="this.className='bor5';">5 </a>
我的代码是下面这样的.也就是用width的宽度来固定住点击后的效果.CSS:
.star-rating li.current-rating{
background: url(star_rating2.gif) left bottom;
position: absolute;
width:150px;/*30是显示1颗星,60是2颗...*/
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
js:
function changeCss(obj)
{
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.width=obj*30;
}
html:
<a href="#" onclick="changeCss(this.innerText)">1 </a>
<a href="#" onclick="changeCss(this.innerText)">2 </a>
<a href="#" onclick="changeCss(this.innerText)">3 </a>
<a href="#" onclick="changeCss(this.innerText)">4 </a>
<a href="#" onclick="changeCss(this.innerText)">5 </a>
<input class="bor" />
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
都是取的第一个style的第一个规则,你应该根据实际需要改的,不行,把代码发过来看吧,我发消息给你了,在帖子上沟通太慢
<style type="text/css">
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background: url(star_rating2.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(star_rating2.gif) left center;
z-index: 2;
left: 0px;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:30px;
}
.star-rating a.two-stars{
left:30px;
}
.star-rating a.two-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 60px;
}
.star-rating a.three-stars:hover{
width: 90px;
}
.star-rating a.four-stars{
left: 90px;
}
.star-rating a.four-stars:hover{
width: 120px;
}
.star-rating a.five-stars{
left: 120px;
}
.star-rating a.five-stars:hover{
width: 150px;
}
.star-rating li.current-rating{
background: url(star_rating2.gif) left bottom;
position: absolute;
width:30px;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
</style>
但现在看你的意思是,点哪个链接,哪个链接的宽度相应变化,是这个意思吗?你不能把功能描述的清楚吗?
呵呵,当然了,这样也好,我可以多水几帖了
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>评分</title>
<style type="text/css">
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background: url(star_rating2.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(star_rating2.gif) left center;
z-index: 2;
left: 0px;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:30px;
}
.star-rating a.two-stars{
left:30px;
}
.star-rating a.two-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 60px;
}
.star-rating a.three-stars:hover{
width: 90px;
}
.star-rating a.four-stars{
left: 90px;
}
.star-rating a.four-stars:hover{
width: 120px;
}
.star-rating a.five-stars{
left: 120px;
}
.star-rating a.five-stars:hover{
width: 150px;
}
.star-rating li.current-rating{
background: url(star_rating2.gif) left bottom;
position: absolute;
width:0px;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
</style><script type="text/javascript">
function setValue(theValue){
document.getElementById("Text1").value = theValue;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="star-rating">
<li class="current-rating">Currently 0/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star" onclick="setValue(this.innerHTML);">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars" onclick="setValue(this.innerHTML);">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars" onclick="setValue(this.innerHTML);">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars" onclick="setValue(this.innerHTML);">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars" onclick="setValue(this.innerHTML);">5</a></li>
</ul>
<input id="Text1" type="hidden" runat="server" maxlength="1" readonly="readOnly" size="1" />
</div>
</form>
</body>
</html>上面就是全部代码了
图片地址:http://www.jscode.cn/JsCode/images/star_rating2.gif
其中CSS里面的.star-rating li.current-rating的第三个属性width可以控制显示的星级效果.30=1星,60=2星....
我要实现点击连接1可以把width设置为30px...也就是上面已经写好的代码不能固定住点击的效果,我想通过动态设置width来控制住点击后的效果...