学习js使用className遇到的疑惑

xiaokehai 2015-10-29 07:00:40
我在学习js时,想利用通过getElementById()获取得的ID来指明属性className等于一个css样式,我是想实现这样一个效果,当单击添加css样式按钮时,这个样式添加,当单击移出css样式时,这个样式就移出。我的问题是,我写的这个效果,第一次操作可以实现,但是多次点击时就失效了。是什么原因呢?
我的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.b_img{
background-image: url(bwa.jpg);
background-repeat: no-repeat;
}
#db{
display: none;
}

</style>
</head>
<body id="con">
<input id="ab" value="添加背景" type="button" onclick="addBackround_img()"/>
<input id="db" value="移除背景" type="button" onclick="delectBackround_img()">
<script type="text/javascript">
function addBackround_img(){
//背景消失
var b_img=document.getElementById("con");
b_img.className="b_img";
//b_img.style.backgroundImage="url(bwa.jpg)";
//b_img.style.backgroundRepeat="no-repeat";
//移出背景的按钮出现
var db_button=document.getElementById("db");
db_button.style.display="block";
//显现背景的按钮消失
var ab_button=document.getElementById("ab");
ab_button.style.display="none";
}
function delectBackround_img(){
var d_img=document.getElementById("con");
d_img.style.backgroundImage="url()";

var ab_button=document.getElementById("ab");
ab_button.style.display="block";

var db_button=document.getElementById("db");
db_button.style.display="none";
}
</script>
</body>
</html>
...全文
213 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
xiaokehai 2015-11-08
  • 打赏
  • 举报
回复
恩,意思是原来的类名移出后,重新添加了一个空的类名给他,这样子背景也就没有了,是不?
seanLian 2015-10-30
  • 打赏
  • 举报
回复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .b_img{ background-image: url(imges/1.jpg); background-repeat: no-repeat; } #db{ display: none; } </style> </head> <body id="con"> <input id="ab" value="添加背景" type="button" onclick="addBackround_img()"/> <input id="db" value="移除背景" type="button" onclick="delectBackround_img()"> <script type="text/javascript"> function addBackround_img(){ //背景消失 var b_img=document.getElementById("con"); b_img.className="b_img"; //b_img.style.backgroundImage="url(bwa.jpg)"; //b_img.style.backgroundRepeat="no-repeat"; //移出背景的按钮出现 var db_button=document.getElementById("db"); db_button.style.display="block"; //显现背景的按钮消失 var ab_button=document.getElementById("ab"); ab_button.style.display="none"; } function delectBackround_img(){ var d_img=document.getElementById("con"); d_img.className=""; // 添加的是类名 ;把类名移除掉重新添加 // d_img.style.backgroundImage="url()"; var ab_button=document.getElementById("ab"); ab_button.style.display="block"; var db_button=document.getElementById("db"); db_button.style.display="none"; } </script> </body> </html>
xiaokehai 2015-10-29
  • 打赏
  • 举报
回复
谢谢
天际的海浪 2015-10-29
  • 打赏
  • 举报
回复
function delectBackround_img(){ var d_img=document.getElementById("con"); //d_img.style.backgroundImage="url()"; d_img.className=""; var ab_button=document.getElementById("ab"); ab_button.style.display="block"; var db_button=document.getElementById("db"); db_button.style.display="none"; }

87,899

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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