如何在单击div时更改div的样式

时间:2018-06-28 10:48:36

标签: javascript html css styles

我已经建立了一个将记录和图像保存在数据库中的网站。
但是,当我单击div并查看任何要更改div颜色的成员的记录时,以及当我看到记录时。
我想更改div的样式。
当我单击任何div时,该div上的图像就会加载。我该怎么办?
这意味着当单击任何div时style1在div上工作 我的代码是:

<script>
function changelod(obj)
{
obj.setAttribute("class", "style1");
}
</script>
<style>
.style1{background:transparent url('12/loading.gif') 50% 50% no-repeat;}
#content {clear:left;overflow:auto;width:780px;height:auto;padding:5px 5px;}
#left {float:left;width:242px;padding:5px 5px;border:1px solid #000;}
</style>
<div id="content">
<div id="left">
<div id="leftbox" class="style">
<a onclick="changelod(this);" href="members.php&code=<?php echo $myrowadfix["securtycode"]; ?>" target="_blank">
<div id="boxbody">
<img src="img/8.gif" height="100" width="100">
<p><?php echo $myrowadfix["histrym"]; ?>">
</div>
</a>
</div>
</div>

<div id="left">
<div id="leftbox" class="style">
<a onclick="changelod(this);" href="members.php&code=<?php echo $myrowadfix["securtycode"]; ?>" target="_blank">
<div id="boxbody">
<img src="img/8.gif" height="100" width="100">
<p><?php echo $myrowadfix["histrym"]; ?>">
</div>
</a>
</div>
</div>

<div id="left">
<div id="leftbox" class="style">
<a onclick="changelod(this);" href="members.php&code=<?php echo $myrowadfix["securtycode"]; ?>" target="_blank">
<div id="boxbody">
<img src="img/8.gif" height="100" width="100">
<p><?php echo $myrowadfix["histrym"]; ?>">
</div>
</a>
</div>
</div>

</div>

<div id="content">
<div id="left">
<div id="leftbox" class="style">
<a onclick="changelod(this);" href="members.php&code=<?php echo $myrowadfix["securtycode"]; ?>" target="_blank">
<div id="boxbody">
<img src="img/8.gif" height="100" width="100">
<p><?php echo $myrowadfix["histrym"]; ?>">
</div>
</a>
</div>
</div>

<div id="left">
<div id="leftbox" class="style">
<a onclick="changelod(this);" href="members.php&code=<?php echo $myrowadfix["securtycode"]; ?>" target="_blank">
<div id="boxbody">
<img src="img/8.gif" height="100" width="100">
<p><?php echo $myrowadfix["histrym"]; ?>">
</div>
</a>
</div>
</div>

<div id="left">
<div id="leftbox" class="style">
<a onclick="changelod(this);" href="members.php&code=<?php echo $myrowadfix["securtycode"]; ?>" target="_blank">
<div id="boxbody">
<img src="img/8.gif" height="100" width="100">
<p><?php echo $myrowadfix["histrym"]; ?>">
</div>
</a>
</div>
</div>
</div>

此代码的帮助我尝试了此代码,但div移动了页面顶部和图像加载
在此div上滚动条显示

2 个答案:

答案 0 :(得分:0)

在changelod(obj)函数中,obj是TAG,因为您传递了this参数。

如果要更改其父级()的类别,只需选择该父级:

obj.parentNode.setAttribute("class", "style1");

作为参考,您可以在这里阅读一些内容:https://www.w3schools.com/jsref/prop_node_parentnode.asp

答案 1 :(得分:0)

希望这对您有帮助

    function changelod(obj) { 
       obj.parentNode.setAttribute("class", "style1");
}