怎样用javascript设置CSS效果

renwangxing 2008-04-05 05:58:48
如果把style="border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;";放在html中，就成功，但是放在javascript的changeBg函数中就不成功？？
代码比如(部分)：
<head>
<script type="text/javascript">
var oldObj;
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.style="border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;";
}
}

</head>
<body>
<table><tr>
<td id="1" onClick="changeBg('1')">首页</td>
<td id="2" onClick="changeBg('2')">论坛</td>
<td id="3" onClick="changeBg('3')">下载</td>
<td id="4" onClick="changeBg('4')">读书</td>
<td id="5" onClick="changeBg('5')">新闻</td>
</tr>
</table>


...全文
869 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
renwangxing 2008-04-06
  • 打赏
  • 举报
 回复
我吃饭回来了。两位的解法都行，谢谢了
kokobox 2008-04-05
  • 打赏
  • 举报
 回复
Dan1980 我s你了
Dan1980 2008-04-05
  • 打赏
  • 举报
 回复
用一个变量来存储当前标签就行了，用循环效率低。


<html>

<head> 

<style type="text/css"> 

.image {

  border: 1px solid red;

  background-image: url('/application/images/selected_bg.gif');

  background-repeat:no-repeat;

  background-position:left bottom;   

} 

</style>   

<script type="text/javascript">

var current_tab;

function changeBg(tab) {

  if (current_tab) current_tab.className = "";

  tab.className = "image";

  current_tab = tab;             

}

</script>

</head>   

<body>   

<table>

  <tr>   

    <td id="1" onClick="changeBg(this)">首页</td>   

    <td id="2" onClick="changeBg(this)">论坛</td>   

    <td id="3" onClick="changeBg(this)">下载</td>   

    <td id="4" onClick="changeBg(this)">读书</td>   

    <td id="5" onClick="changeBg(this)">新闻</td>   

  </tr>   

</table>

</body>

</html>
kokobox 2008-04-05
  • 打赏
  • 举报
 回复
你做个循环
比如

function changeBg(sapnid) {
if (sapnid != null){
for(var i = 1; i < 6 ; i++){
oldObj=document.getElementById(i);
if(oldObj.className!=''){
oldObj.className="";
}

}
oldObj=document.getElementById(sapnid);
oldObj.className="image";
}
}
renwangxing 2008-04-05
  • 打赏
  • 举报
 回复
多谢两位
我吃饭去先
renwangxing 2008-04-05
  • 打赏
  • 举报
 回复 
<head> 

<style type="text/css"> 

.image {border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;   

 } 

</style>   

<script type="text/javascript">   

        var oldObj;   

function changeBg(sapnid) {             

 if (sapnid != null){   

oldObj=document.getElementById(sapnid);   

oldObj.className="image"; 

     }   

}   



</head>   

<body>   

<table>   <tr>   

              <td id="1" onClick="changeBg('1')">首页   </td>   

              <td id="2" onClick="changeBg('2')">论坛   </td>   

              <td id="3" onClick="changeBg('3')">下载   </td>   

              <td id="4" onClick="changeBg('4')">读书   </td>   

              <td id="5" onClick="changeBg('5')">新闻   </td>   

</tr>   

</table>
renwangxing 2008-04-05
  • 打赏
  • 举报
 回复
现在代码是这样的：
<head>
<style type="text/css">
.image {border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;
}
</style>
<script type="text/javascript">
var oldObj;
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.className="image";
}
}

</head>
<body>
<table> <tr>
<td id="1" onClick="changeBg('1')">首页 </td>
<td id="2" onClick="changeBg('2')">论坛 </td>
<td id="3" onClick="changeBg('3')">下载 </td>
<td id="4" onClick="changeBg('4')">读书 </td>
<td id="5" onClick="changeBg('5')">新闻 </td>
</tr>
</table>
问题是现在点击“论坛”，背景图片就出来了。但是点击“下载”背景色也出来，我想要的效果是，点击“下载”的时候，"论坛"的背景图片应该消失啊，我要的是导航拉的“我现在在某模块”的效果啊？
该如何改进呢？
renwangxing 2008-04-05
  • 打赏
  • 举报
 回复
但是问题又来了
背景图片只是再单击的那个瞬间出现，我现在是想让它出现点击之后图片出现的效果，如何？？
kokobox 2008-04-05
  • 打赏
  • 举报
 回复
呵呵，6楼说的对

我忘记了

以前用display也是obj.style.display='none';


不好意思lz 我忘记了。
renwangxing 2008-04-05
  • 打赏
  • 举报
 回复
yibunengjing 兄，果然！
yibunengjing 2008-04-05
  • 打赏
  • 举报
 回复
你可以这样做，把你要的css效果放到一个css样式中，起个名字叫xxx，然后如下：
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.style.className="xxx";
}
}
renwangxing 2008-04-05
  • 打赏
  • 举报
 回复
好像没有报什么错，是不是语法“oldObj.style”不对啊？
kokobox 2008-04-05
  • 打赏
  • 举报
 回复
js报告什么错？
kokobox 2008-04-05
  • 打赏
  • 举报
 回复
lz 怎么就你一个人？？？
renwangxing 2008-04-05
  • 打赏
  • 举报
 回复 
<head>  

<script type="text/javascript">  

        var oldObj;  

function changeBg(sapnid) {            

 if (sapnid != null){  

oldObj=document.getElementById(sapnid);  

oldObj.style="border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;";  

     }  

}  



</head>  

<body>  

<table>  <tr>  

             <td id="1" onClick="changeBg('1')">首页  </td>  

             <td id="2" onClick="changeBg('2')">论坛  </td>  

             <td id="3" onClick="changeBg('3')">下载  </td>  

             <td id="4" onClick="changeBg('4')">读书  </td>  

             <td id="5" onClick="changeBg('5')">新闻  </td>  

</tr>  

</table>

renwangxing 2008-04-05
  • 打赏
  • 举报
 回复
<head>
<script type="text/javascript">
var oldObj;
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.style="border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;";
}
}

</head>
<body>
<table> <tr>
<td id="1" onClick="changeBg('1')">首页 </td>
<td id="2" onClick="changeBg('2')">论坛 </td>
<td id="3" onClick="changeBg('3')">下载 </td>
<td id="4" onClick="changeBg('4')">读书 </td>
<td id="5" onClick="changeBg('5')">新闻 </td>
</tr>
</table>
jQuery JavaScript与CSS开发入门经典
编辑推荐 JQuery堪称动态Web应用程序领域的编程利器，可帮助您利用更少代码完成更多工作，同时减少错误数量。jQuery将JavaScript编程量精简为寥寥数行代码，使JavaScript变得更直观，更富魅力。iQuery还允许同时为一个或多个元素设置样式，使得通过JavaScript操纵CSS变得分外轻松。 在这本面向项目的精品书籍的指引下，即使是初出茅庐的JavaScript新手也能迅速开始利用JavaScript jQuely库来减少需要编写和测试的代码量。《iQuery JavaScript与CSS开发入门经典》包含极富帮助的指南和紧贴实际的练习，使读者能在实际中轻松驾驭iQuery，并收到事半功倍的神奇效果。 内容简介 本书浓墨重彩地描述iQuery的API及iQuery框架的所有基础知识，在实例引导下演示如倒使用iQuery架以超越纯JavaScrjpt的速度实现更多功能，以及如何使用最少代码完成繁琐任务。本书还介绍jQuery UI库的用法，指导您使用jQuery UI库创建赏心悦目的专业用户界面。书中包含极富启迪意义的指南和紧贴实际的练习，以引导读者在实际中得心应手地使用jQuery。
html+javascript+css(8本chm)
html+javascript+css(8本chm)无论对于我们jsp或者asp的Web开发的初学者都很有用，关键是方便我们随时参考和查阅。
HTML_CSS_JavaScript网页制作从入门到精通
HTML_CSS_JavaScript网页制作从入门到精通
CSS3打造百度贴吧的3D翻牌效果完整实例源码
代码为博客示例代码，http://blog.csdn.net/lmj623565791/article/details/32340227 有问题，博客中留言
HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册实例源码
代码为博客实例代码 http://blog.csdn.net/lmj623565791/article/details/32964301 有问题博客中留言
Java SE

62,623

社区成员

307,257

社区内容

发帖
与我相关
我的任务
社区描述
Java 2 Standard Edition
社区管理员
  • Java SE
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章