JavaScript改变背景色

最新推荐文章于 2021-12-04 00:35:42 发布
最新推荐文章于 2021-12-04 00:35:42 发布
阅读量2k 收藏 3
点赞数 2
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37995109/article/details/85006937
版权 
<html>
 <head></head>
 <body> 
  <ul id="ul1"> 
   <li></li> 
   <li></li> 
   <li></li> 
   <li class="box"></li> 
   <li></li> 
   <li class="box"></li>. 
   <li class="box"></li> 
   <li></li> 
   <li></li> 
   <li></li> 
  </ul> 
 </body>
</html>



window.onload = function() {
    //获取名字ul1的ID
    var oUl = document.getElementById('ul1');
    //获取li标签
    var aLi = oUl.getElementsByTagName('li');
    //循环li
    for (var i = 0; i < aLi.length; i++) {
        //判断li标签名字为className为box
        if (aLi[i].className == 'box') {
            //给li标签加背景色
            aLi[i].style.background = 'red';
        }
    }
}

 

Lvdon9
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript教程系列42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色
邢晋宇的前端博客
05-22 4178
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .one{ width: 200px;
JavaScript改变元素的背景颜色
weixin_55017780的博客
05-29 4368
改变元素的背景颜色是通过点击某个特定的按钮，来获取元素来改变背景颜色。 其实现的原理也非常的简单 首先第一步 页面的布局： 先设置几个div盒子可供点击和选择的点击的事件，给他们几个类和id，方便设置他们的css样式和js获取事件。 ...
js获取图片主色改变盒子的背景色
weixin_45791806的博客
07-28 672
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.aspnetcdn.com/ajax
原生JS点击事件(点击对应的标签可以改变其背景颜色)
wujiancai1163的博客
01-11 3996
点击对应的标签可以改变其背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
JavaScript动态修改背景颜色的方法
10-24
主要介绍了JavaScript动态修改背景颜色的方法,涉及javascript操作鼠标事件及样式的技巧,非常具有实用价值,需要的朋友可以参考下
javascript实现随时变化着的背景颜色
10-24
主要介绍了javascript实现随时变化着的背景颜色的方法，非常的简单实用，有需要的小伙伴可以直接拿走。
JavaScript实现点击单元格改变背景色的方法
01-21
本文实例讲述了JavaScript实现点击单元格改变背景色的方法。分享给大家供大家参考，具体如下： <html> <body> 出租信息 <td width=93 height=29 background=hotlinkbg.gif
javascript修改表格背景色实例代码分享
10-26
3. **颜色改变**：通过改变`tr`元素的`bgColor`属性，我们可以动态调整行的背景色。`#d3d3d3`、`#ffffff`和`#e4e4e4`是不同颜色的十六进制表示。 4. **事件回调函数**：`rowOver`和`rowOut`是处理鼠标悬停事件的...
JavaScript实现的背景自动变色代码
10-23
主要介绍了JavaScript实现的背景自动变色代码,涉及JavaScript数组操作结合定时函数实现修改页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Html定义网页背景色
热门推荐
为了梦，爱一生
11-29 2万+
对大多数浏览器而言，其默认的背景颜色为白色或灰白色。在网页设计中，bgcolor属性用于设置整个网页的背景颜色。 基本语法： 背景颜色有两种表示方式。 使用颜色名指定，例如红色、绿色等分别用red、green等表示。使用十六进制格式数据值#RRGGBB来表示，RR、GG、BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据。 实例代码： 定义
JS改变当前控件的背景色
footprint01的博客
10-11 3801
当鼠标悬停按键上，颜色为蓝色，离开后变为红色 /** * 鼠标悬停变色 */ $(&quot;#loginButton&quot;).hover(function() { $(this).css({'background-color':'blue'}); }, function() { $(this).css({'background-color':'red'}); }); 本文参考：百度知道...
如何修改js内的文字颜色
CYJ_CYJ的博客
06-17 9720
最近做项目想修改文字颜色,html 修改就比较简单，直接加样式就好了,但又用到了 js，那js里面的文字颜色该怎么修改呢，话不多说，代码如下： ps: jQuery文件需要另行下载 附上链接：JQuery下载 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="JQuery/jquery.min.
javascript 背景颜色改变
weixin_33694620的博客
06-11 176
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&...
JS改变页面颜色
刀刀宅
05-18 1436
简单的js改变颜色
js中更改div的背景颜色：
FareBoy的博客
07-22 7144
js中更改div的背景颜色： document.getElementById('j').style.background="#64B5EC";
【JavaScript】自动改变网页背景色
林多
10-28 2231
自动改变网页背景色 最近在做一个功能时，需要一个自动变换背景的网页，进行功能验证。于是就是写了一个自动变色（背景）的网页。下面是些用到的知识点，作为总结。 知识点1：定时器 setTimeout("func", ms) 知识点2：css style，这里设定了day和night两类。day对应白色背景，night对应黑色背景。 <style type="text/css"> ...
js第1章JavaScript案例：改变网页背景颜色、验证用户输入的密码
WHT869706733的博客
12-04 3403
1.一个简单的JavaScript程序，实现单击网页中的按钮改变网页的背景色。 <script> function color(str) { document.body.style.backgroundColor = str; } </script> <body> <input type="button" value="设为红色" onclick="color('red')"> <input
如何通过JavaScript改变css背景色
最新发布
05-25
可以使用JavaScript中的DOM操作来更改CSS样式，具体步骤如下： 1. 获取需要更改样式的元素，可以使用`document.querySelector()`或`document.getElementById()`等方法； 2. 使用`element.style`来访问元素的样式属性，例如`element.style.backgroundColor`可以获取或设置元素的背景色； 3. 将需要更改的样式属性设置为新的值，例如`element.style.backgroundColor = 'red'`即将元素的背景色设置为红色。 下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Change background color with JavaScript</title> <style> body { background-color: #fff; } </style> </head> <body> <button onclick="changeColor()">Change Color</button> <script> function changeColor() { document.body.style.backgroundColor = 'red'; } </script> </body> </html> ``` 上面的代码中，点击按钮后会将页面背景色更改为红色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值