js改变元素背景颜色

最新推荐文章于 2024-07-23 23:06:32 发布
最新推荐文章于 2024-07-23 23:06:32 发布
阅读量5.8k 收藏 7
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanjin_xiaoxiao/article/details/119510628
版权
这篇博客展示了如何使用JavaScript动态改变HTML页面的背景颜色。通过点击不同颜色的方块，页面背景颜色会相应地更改为所选颜色。代码包括HTML结构、CSS样式以及JavaScript事件监听器，实现简单的交互效果。
摘要由CSDN通过智能技术生成

1.在页面上设置初始值

<!doctype html>

<html>

<head>

<meta 1charset="utf-8">

<title>Document</title>

         <linkrel="stylesheet" href="css/style.css">//引入css文件

</head>

<body id="body">

                  <divclass="setBC">

                          <pclass="boxText" id="boxColor">请选择网页的背景色：</p>

//设置上方p标签的类名为boxText，id名为boxColor

                          <divclass="box1" id="color1"></div>

//设置上方p标签的类名为box1，id名为color1

                          <divclass="box2" id="color2"></div>

//设置上方p标签的类名为box2，id名为color2

                          <divclass="box3" id="color3"></div>

//设置上方p标签的类名为box3，id名为color3

                          <divclass="box4" id="color4"></div>

//设置上方p标签的类名为box4，id名为color4

                          <divclass="box5" id="color5"></div>

//设置上方p标签的类名为box5，id名为color5

                          <divclass="box6" id="color6"></div>

//设置上方p标签的类名为box6，id名为color6

最低0.47元/天 解锁文章
yanjin_xiaoxiao
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
10，利用jquery中的选择器,至少写三种方法,让p元素的字体颜色变成红色
hyt_123456的博客
10-27 439
代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> <style> ...
jquery改变元素的背景颜色
热门推荐
wangsong97的博客
10-27 1万+
这里有个div控件，点击div就会改变指定元素的背景颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery.js"></script> <style> #color{ width: 200p...
JS中的DOM操作完成背景颜色渐变
FJ70940927的博客
07-23 121
点击背景，渐变方向发生改变。
js改变页面某个元素的背景颜色（rgb和十六进制两种方法）。
weixin_34143774的博客
03-29 3942
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
JavaScript改变元素的背景颜色
weixin_55017780的博客
05-29 4419
改变元素的背景颜色是通过点击某个特定的按钮，来获取元素来改变背景颜色。 其实现的原理也非常的简单 首先第一步 页面的布局： 先设置几个div盒子可供点击和选择的点击的事件，给他们几个类和id，方便设置他们的css样式和js获取事件。 ...
【JS实战01】js实现背景颜色改变
大前端开发工程师、互联网方向创业者
09-03 6261
javaScript初级入门案例
js改变背景颜色有感
博客写得好，技术好，才是真的好
07-22 6563
js改变背景颜色本身并不难实现， //改变id为teamIntroduction的dom元素的背景颜色为红色 var inputBackgroundColor=document.getElementById("teamIntroduction").style.backgroundColor='red'; 但是这个过程中发现了一些问题，记录一下。 后来我把代码改成如下方式： //先获取id=team
得到元素真实的背景颜色的js代码
10-30
说明: 传入参数一个，为元素的id值或元素本身，返回为元素的真实背景色值（字符串）。背景值均为16进制的值（原代码是是IE里面返回的是16进制的值，而Mozilla则是rgb值，Dnew.cn将其修改为均返回16进制的值）。
JavaScript动态修改背景颜色的方法
10-24
通过JavaScript，我们可以轻松地选择页面上的元素，并对其进行修改和增强，比如改变背景颜色。 在JavaScript中，修改背景颜色通常涉及到`document.bgColor`属性或`document.body.style.backgroundColor`属性。虽然`...
JS修改iframe页面背景颜色的方法
10-24
JS修改iframe页面背景颜色的方法是一个涉及Web前端技术的具体应用，其中主要包含了JavaScript编程语言和iframe HTML元素的相关知识点。了解如何通过JavaScript修改iframe页面的背景颜色，不仅需要掌握JavaScript的...
javascript实现随时变化着的背景颜色
10-24
将这三个随机数以字符串拼接的方式，构建一个新的背景颜色值，并赋值给'dv'元素的style.backgroundColor属性，从而实现背景颜色的改变。 完整的setInterval调用如下： ```javascript setInterval(function() { ...
鼠标选择动态改变网页背景颜色的JS代码
10-26
知识点：如何使用JavaScript实现鼠标点击改变网页背景颜色 1. JavaScript简介 JavaScript是一种高级的、解释执行的编程语言，它可以执行在多种浏览器中。它常用于网页中添加动态交互效果，包括改变网页背景颜色等。...
js javascript 设置页面背景色,设置背景图片
黑色头发
05-27 1780
[code="js"] New Document function update(temp) { if(temp == 'color') { document.body.style.backgroundColor="#FFFFFF";//改变背景色 } if(temp == 'img') { docum...
改变网页背景色
qq_45337854的博客
10-11 683
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function color(str){ document.b...
js 获得网页背景色和字体色 background-color
weixin_34082695的博客
03-20 659
2019独角兽企业重金招聘Python工程师标准>>> ...
js控制div颜色
weixin_33882452的博客
08-19 374
&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;style&gt; #div1{width:400px;height:400px;background-color:red;} &lt;/style&gt; &lt;script&gt; function blue(){ div1=document.getElementById('...
JavaScript修改背景颜色
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 775
JavaScript修改背景颜色
《JavaScript》----backgroundcolor属性
snail_fighting的博客
04-18 3085
注意！function函数中的backgroundcolor属性设置语句为：.style.backgroundColor="green"; 而html中background属性设置语句为：style="background-color:green; 注意大小写格式不同！！！
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习
最新发布
08-25
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习 简历是展示个人经历、技能和能力的重要文档，以下是一个常见的简历格式和内容模板，供您参考： 简历格式： 头部信息：包括姓名、联系方式（电话号码、电子邮件等）、地址等个人基本信息。 求职目标（可选）：简短描述您的求职意向和目标。 教育背景：列出您的教育经历，包括学校名称、所学专业、就读时间等。 工作经验：按时间顺序列出您的工作经历，包括公司名称、职位、工作时间、工作职责和成就等。 技能和能力：列出您的专业技能、语言能力、计算机技能等与职位相关的能力。 实习经验/项目经验（可选）：如果您有相关实习或项目经验，可以列出相关信息。 获奖和荣誉（可选）：列出您在学术、工作或其他领域获得的奖项和荣誉。 自我评价（可选）：简要描述您的个人特点、能力和职业目标。 兴趣爱好（可选）：列出您的兴趣爱好，展示您的多样性和个人素质。 参考人（可选）：如果您有可提供推荐的人员，可以在简历中提供其联系信息。 简历内容模板： 姓名: 联系方式: 地址: 求职目标: （简短描述您的求职意
js 修改元素的父元素的背景颜色
06-08
可以通过以下代码修改元素的父元素的背景颜色： ```javascript let element = document.getElementById("your-element-id"); let parent = element.parentNode; parent.style.backgroundColor = "red"; ``` 其中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值