22 样式操作

最新推荐文章于 2024-05-06 18:26:11 发布

VIP文章 qingshui_913

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量256

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_59809997/article/details/123412073

版权

需求：网页开关灯

<style>
   .cls{
       background: black;
   }
</style>
<body>
<input type="button" value="开/关灯" id="btn">
<script> //获取body标签  document.body 拿到body标签
   var btn = document.getElementById("btn");
   btn.onclick = function(){
   document.body.className = document.body.className != "cls" ? "cls" : ""; //用三元运算符进行判断
   }
</script> 
</body>

需求：点击按钮禁用文本框

<input type="button" value="点击禁用文本框" id="btn">
<input type="text" value="来输入文本" id="txt">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        document.getElementById("txt").disabled = true;
    }
</script>

需求：点击按钮修改列表背景颜色

<input type="button" value="点击修改颜色" id="btn">
<ul id="uu">
    <li>鸣人</li>
    <li>佐助</li>
    <li>小樱</li>
</ul>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        document.getElementById("uu").style.backgroundColor = "pink";
    }
</script>

需求：阻止a链接跳转

 <!-- 方案1 -->
 <a href="http://www.baidu.com" onclick="alert('被点击了')" return false>百度</

最低0.47元/天解锁文章

优惠劵

qingshui_913

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
22 样式操作

需求：网页开关灯<style> .cls{ background: black; }</style><body><input type="button" value="开/关灯" id="btn"><script> //获取body标签 document.body 拿到body标签 var btn = document.getElementById("btn"); btn.onclick = fun
复制链接

扫一扫