JS实例（一）

最新推荐文章于 2023-12-02 22:06:52 发布

姚希瑶

最新推荐文章于 2023-12-02 22:06:52 发布

阅读量1.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39178993/article/details/81197946

版权

前端专栏收录该内容

50 篇文章 1 订阅

订阅专栏

1、移入移出div的变化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

}

.box {

width: 200px;

height: 200px;

background: yellow;

}

</style>

</head>

<body>

</body>

</html>

2、动态改变block的出现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>block的变化</title>

</head>

<body>

yaoxiyao

</div>

</body>

</html>

3、点击按钮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

input {

background: white;

}

.active {

background: yellow;

}

</style>

window.onload = function() {

var oBtn = document.getElementsByTagName('input');

var i = 0;

for (i = 0; i < oBtn.length; i++) {

oBtn[i].onclick = function() {

for (i = 0; i < oBtn.length; i++) {

oBtn[i].className = '';

} //点击一个按钮是，先把所有的className变为空，即无样式，不是active

this.className = 'active'; //再把当前点击的按钮的className赋值为active

};

}

};

</script>

<title>无标题文档</title>

</head>

4、选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

input {

background: white;

}

.active {

background: yellow;

}

div {

width: 100px;

height: 100px;

background: #CCC;

display: none;

}

/*设为全部隐藏*/

</style>

window.onload = function() {

var oBtn = document.getElementsByTagName('input');

var oDiv = document.getElementsByTagName('div');

var i = 0;

//分成两步

for (i = 0; i < oBtn.length; i++) {

oBtn[i].index = i; //第几个按钮的索引值是几

oBtn[i].onclick = function() {

for (i = 0; i < oBtn.length; i++) {

oBtn[i].className = '';

oDiv[i].style.display = 'none'; //所有的选项卡内容隐藏

} //点击一个按钮是，先把所有的className变为空，即无样式，不是active

this.className = 'active'; //再把当前点击的按钮的className赋值为active

//this表示当前点击的那个按钮：oBtn[i]

oDiv[this.index].style.display = 'block';

//第一个的第一个div

};

}

};

</script>

<title>无标题文档</title>

</head>

<body>

</body>

</html>

5、网页换肤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

window.onload = function () {

var oLink = document.getElementById("link1");

var oBtn1 = document.getElementById("btn1");

var oBtn2 = document.getElementById("btn2");

alert(oLink.href)

oBtn1.onclick = function () {

oLink.href = 'css1.css';

}

oBtn2.onclick = function () {

oLink.href = 'css2.css';

}

</script>

</head>

<body>

<form>

<dt>

<strong>可以换肤的提交框：</strong>

</dt>

<dd>输入姓名：

</dd>

<dd>输入密码：

</dd>

<dd>请您留言：

</dd>

</dd>

</form>

</dl>

</body>

</html>

css自行编写页面的颜色样式即可

姚希瑶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实例（一）

1、移入移出div的变化&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt...
复制链接

扫一扫