本站的合作过的网站：北风网极客学院柠檬学院图灵学院

开启辅助访问最新回复帖子最新发表帖子

恭喜Java学习者论坛（https://www.javaxxz.com）已经为数万Java学习者服务超过8年了！积累会员资料超过10000G+！
成为本站VIP会员，下载本站10000G+会员资源，购买链接：点击进入购买VIP会员

Java学习者论坛»论坛 › 论坛互动 › 经验心得总结 › js改变style样式和css样式

发新帖

查看: 284|回复: 0

[默认分类] js改变style样式和css样式

TA的每日心情

	开心 2021-12-13 21:45

签到天数: 15 天

[LV.4]偶尔看看III

发表于 2018-5-22 12:01:18 | 显示全部楼层 |阅读模式

本站已经为数万初学者服务超过7年！成为本站VIP会员，免金币下载本站10000G+VIP会员资料！

js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Change.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="javascript">
function test4(event) {
if(event.value == "黑色") {
//获取div1
var div1 = document.getElementById("div1");
div1.style.backgroundColor="black";
}
if(event.value == "红色") {
//获取div1
var div1 = document.getElementById("div1");
div1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div id="div1" style="width:400px; height:300px; background-color:red;">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/>
</body>
</html>

复制代码

test4(this)代表当前的<input相当于把它看成一个对象。

再来看一下改变css样式，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Change1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/Change.css">
<script language="javascript">
function test4(event) {
//获取样式表中所有class选择器都获得
var ocssRules = document.styleSheets[0].rules;
//从ocssRules中取出你希望的class
var style1 = ocssRules[0];
if(event.value == "黑色") {
//window.alert(style1.style.backgroundColor);
style1.style.backgroundColor="black";
}else if(event.value == "红色") {
style1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/>
</body>
</html>

复制代码

回复

使用道具举报

发新帖

|手机版|Java学习者论坛 ( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )

GMT+8, 2024-5-17 03:01 , Processed in 0.334719 second(s), 37 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表