JavaScript之改变样式

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS修改样式</title><style type="text/css">#box{width: 400px;height: 400px;border:1px solid purple;margin: 30px auto;background: url(img1.jpg) no-repeat;background-size: 400px 400px;}</style>
</head>
<body><div id="box">此时不肯低头,明日何以抬头</div>
</body>
</html><script type="text/javascript">//获取相应div区域元素var box=document.getElementById('box');// JavaScript修改样式
    box.onclick=function(){box.style.backgroundImage='url(img2.jpg)';box.style.backgroundSize='90% 90%';box.style.fontSize='20px';box.style.color='rgba(255,255,255)';};
</script>

JavaScript修改样式的格式,不允许用---符号,例如修改字体大小,一般样式是font-size,那么对不起会失效,正确格式是驼峰式

box.style.fontSize='20px';

初始效果:

点击使用JavaScript添加样式后:

转载于:https://www.cnblogs.com/zjm1999/p/10222757.html

JavaScript之改变样式相关推荐

php鼠标已入移除,原生javascript学习：鼠标移入移出改变样式
这是一个简单的例子,先看demo: 源码如下: #box {width:140px; height:140px; margin: auto; background-color:black; color ...
JavaScript中改变鼠标指针样式的方法
JavaScript中改变鼠标指针样式的方法在js中我们可以通过style对象的cursor属性来设置鼠标指针的样式,例 var body = document.querySelector(&quo ...
html设置鼠标移入移出样式,鼠标移入移出_CSS3实现鼠标移入移出时改变样式的效果...
摘要腾兴网为您分享:CSS3实现鼠标移入移出时改变样式的效果,壹学车,小猿口算,网易uu,万步有约等软件知识,以及山西个税,自动伴奏软件,成都农商银行app,儿歌千千,抖音群控系统,qq领赞,201 ...
vue实现触碰改变样式
vue实现触碰改变样式 1.实现效果: 2.实现代码: ps:引入的是我的vue.js的相对地址,如果你的代码的vue引入地址不一样,请不要以为是我的代码出了错. <!DOCTYPE html& ...
html5 js 修改css样式,JavaScript修改css样式style_javascript技巧_脚本之家
一.局部改变样式分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N&quo ...
解决javascript动态改变img的src属性图片不显示问题
解决javascript动态改变img的src属性图片不显示问题参考文章: (1)解决javascript动态改变img的src属性图片不显示问题 (2)https://www.cnblogs.co ...
Javascript如何改变数组的长度？
修改数组长度使用"数组名.length"可以获取或修改数组的长度.数组长度的计算方式为数组中元素的最大索引值加1,示例代码如下. var arr = ['a', 'b', 'c' ...
input复选框改变样式
今天有人问我input复选框要怎么改变样式,查了一下,特整理下来: <input type="checkbox">input[type="checkbox&q ...
html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式
不能使用外部CSS样式实现hover鼠标悬停改变样式在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式. 可以使用onMouseOver(鼠 ...

JavaScript之改变样式

JavaScript之改变样式相关推荐

最新文章

热门文章