搜 索

js代码实现简单的选择同一个标签元素切换网页或div元素的背景色样式

编辑:QTOOL.NET日期:2021-05-06194

在制作网页时,有时候遇到需要在网页的同一个按钮或标签元素上绑定两个不同的代码事件,来改变网页或标签颜色或其它样式该怎样实现呢?

这里我们以点击a链接,自由的切换网页的两种背景色作为例子.

代码如下:

<a id="adminun-qh" href="javascript:;" onclick="javascript:shijian1()"  >切换</a>

<div id="xythbj" style="width:100%;height:90px"></div>

jQuery插件代码:

<script type="text/javascript">

function shijian1() {

//$("body").css("background", "#333333");//网页背景 

    $("#xythbj").css("background", "#333333");

$("#adminun-qh").attr("onclick","javascript:shijian2()"); 

};

function shijian2(){

//$("body").css("background", "#dddddd");//网页背景

    $("#xythbj").css("background", "#dddddd");

$("#adminun-qh").attr("onclick","javascript:shijian1()");

};

</script>

jQuery代码实现需要先加载jQuery插件,它也是js代码,只不过事先将一些常用的js代码操作集成为更为简便的语句来引用.

首先在jq代码中分别将需要执行的两个代码事件定义为两个函数shijian1()与shijian2()

然后在shijian1中使用css()方法,设置指定元素的样式background背景色为#333333

使用.attr()方法改变html标签的属性onclick点击事件绑定为shijian2()函数

同理创建一个shijian2()函数设置背景色为#dddddd,将id为adminun-qh的元素点击事件绑定为shijian1()函数以达到两端函数代码切换的效果.

或纯js代码:

<script type="text/javascript">

var qh = document.getElementById("adminun-qh");

var zddiv = document.getElementById("xythbj");

function shijian1() {

zddiv.style.background = "#333333"; 

qh.setAttribute("onclick","javascript:shijian2()"); 

};


function shijian2(){

zddiv.style.background =  "#dddddd"; 

qh.setAttribute("onclick","javascript:shijian1()");

};

</script>

js代码实现则无需引用jQuery插件,原理和jquery代码实现方式差不多只不过使用的元素方法不一样.

使用HTML DOM文档对象模型的document.getElementById()方法查找指定id为adminun-qh的元素将其赋值给变量qh.

然后查找需要改变背景色id为xythbj的div元素,定义为变量zddiv

分别定义shijian1()与shijian2()函数改变元素的背景颜色

在shili1()函数中使用使用css属性中的style属性,style.background设置背景颜色.

然后setAttribute设置元素的onclick属性为点击执行js函数shijian2().

同理shili2()函数中设置属性为执行shijian1()函数.

最后在选择的元素上绑定onclick默认事件为执行shijian1()函数即可实现自由的切换网页指定元素的背景颜色,当然我们也可以设置修改html元素的其它css属性来达到其它的效果.

TAG标签:网页布局
此文章由QTOOL.NET编辑
最新文章

热门标签