JavaScript之改变样式

最新推荐文章于 2024-03-05 13:48:53 发布

weixin_30763455

最新推荐文章于 2024-03-05 13:48:53 发布

阅读量227

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zjm1999/p/10222757.html

版权

代码示例:

<!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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30763455

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之改变样式

代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS修改样式</title> <style type="text/css"> #box{ w...
复制链接

扫一扫