javascript动态设置样式style实例分析
更新时间：2015年05月13日 14:58:13 作者：永远爱好写程序
这篇文章主要介绍了javascript动态设置样式style的方法,实例分析了javascript操作style样式的易错点和相关使用技巧,需要的朋友可以参考下
本文实例讲述了javascript动态设置样式style的方法。分享给大家供大家参考。具体分析如下：
动态修改style
1.易错:修改元素的样式不是设置class属性，而是className属性.
2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在javascript中
操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为
javascript中-是不能做属性，类名的。所以在CSS中背景色是background-clolor,而javascript中则是style.background;元素样式名是class，在javascript中是className属性;font-size->style.fontSize;margin-top->style.marginTop
3.单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'" />
1.举例1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态修改style</title>
<style type="text/css">
.day
{
background-color:Green;
}
.night
{
background-color:Black;
}
</style>
<script type="text/javascript">
function dayclick() {
var divMain = document.getElementById("divMain");
//注意这里使用的是className而不是class
divMain.className = "day";
}
function nightclick() {
var divMain = document.getElementById("divMain");
divMain.className = "night";
}
</script>
</head>
<body>
<div id="divMain" class="day">
<font color="red">中华人名共和国</font>
</div>
<input type="button" value="白天" onclick="dayclick()" />
<input type="button" value="黑夜" onclick="nightclick()" />
</body>
</html>
2. 示例:动态修改style(模拟开灯，关灯)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.day
{
background-color:White;
}
.night
{
background-color:Black;
}
</style>
<script type="text/javascript">
function switchLight() {
var btnSwitch = document.getElementById("btnSwitch");
if (document.body.className == "day") {
document.body.className = "night";
btnSwitch.value = "开灯";
}
else {
document.body.className = "day";
btnSwitch.value = "关灯";
}
}
</script>
</head>
<body class="night">
<input type="button" value="开灯" id="btnSwitch" onclick="switchLight()"/>
</body>
</html>
3. 示例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态设置style练习(修改文本框背景色)</title>
<script type="text/javascript">
function IniEvents() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "text") {
//设置txtOnBlur函数为input元素的onblur事件的响应函数
inputs[i].onblur = txtOnBlur;
}
}
}
function txtOnBlur() {
/*
txtOnBlur是onblur的响应函数，而不是被响应函数调用
的函数，所有可以用this来取的发生事件控件的对象
*/
if (this.value.length <= 0) {
this.style.background = "red";
}
else {
this.style.background = "white";
}
}
</script>
</head>
<body onload="IniEvents()">
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
找了半天找到的解决办法，看介绍说是javascript的闭包问题，导致得不能直接读取外部的那个函数，不然就所有传递的参数都变为最后一个了。2009-12-12
这篇文章主要为大家详细介绍了小程序实现上下切换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
JS实现动画兼容性的transition和transform实例分析
这篇文章主要介绍了JS实现动画兼容性的transition和transform方法,结合实例形式分析了transition和transform方法针对手机端浏览器兼容性问题上的相关处理技巧,需要的朋友可以参考下2016-12-12
JavaScript如何让select选择框可输入和可下拉选择
我们知道一般select下拉框是只能选择的,而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,需要允许用户输入想要的内容,这篇文章主要给大家介绍了关于JavaScript如何让select选择框可输入和可下拉选择的相关资料,需要的朋友可以参考下2023-10-10
Bootstrap每天必学之前端开发框架，今天这篇文章就带着大家了解认识当下最流行的前端开发框架Bootstrap，bootstrap深受大家喜爱的原因到底是什么呢，我们一探究竟。2015-11-11
这篇文章主要为大家详细介绍了JavaScript门面模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
大家通过手机自带浏览器打开百度、淘宝，在首页加载完毕后，会自动隐藏页面上方的地址栏,感兴趣的朋友可以参考下2013-01-01
今天小编就为大家分享一篇layui实现鼠标移动到单元格上显示数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
javascript中的数字与字符串相加实例分析，学习js的朋友可以参考下。2011-08-08
本篇文章主要是对window.open打开页面居中显示的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最新评论