使用dom改变字体和修改背景颜色

最新推荐文章于 2024-07-25 17:18:17 发布
置顶 最新推荐文章于 2024-07-25 17:18:17 发布
阅读量6.9k 收藏 3
点赞数
文章标签： class function float html 文档 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AFei_student/article/details/7330293
版权

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<style>

.k1{

         height:10px;

         width:10px;

         margin:2px;

         float:right;}

 

</style>

<script language="javascript"type="text/javascript">

function change(color){

         //设置背景颜色

         document.bgColor=color;

 

         }

function changeSize(size){

         //获取div

         document.getElementById("content").style.fontSize=size+"px";

 

         }

 

 

</script>

 

</head>

 

<body>

<div class="k1"style="background-color:#FFFFFF"οnclick="change('#FFFFFF')"></div>

<div class="k1"style="background-color:#000000"οnclick="change('#000000')"></div>

<div class="k1"style="background-color:#11FFCC"οnclick="change('#11FFCC')"></div>

<spanοnclick="changeSize(26)">大</span>

<spanοnclick="changeSize(15)">中</span>

<spanοnclick="changeSize(10)">小</span>

<hr style="clear:both" />

<div id="content">四级包过秘籍<br />

</div>

</body>

</html>


AFei_student
关注
JavaScript的DOM（JS）
SjwFdb_1__1的博客
08-22 388
目录 1.DOM概述 2.获取HTML元素 3.修改HTML 4 修改CSS样式 5.元素操作 6.DOM事件 7.EvenListener监听事件 1.DOM概述 通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对...
小白操作DOM利用Math对象改变body的背景颜色(可点击暂停)
difushouxi的博客
06-27 255
小白操作DOM利用Math对象改变body的背景颜色(可点击暂停)
使用JS中的DOM操作完成背景颜色渐变方向变换。
2303_81782041的博客
07-25 245
【代码】使用JS中的DOM操作完成背景颜色渐变方向变换。
WebAPI DOM操作文档-随机改变背景颜色小案例
m0_59878114的博客
07-25 178
<script> function random() { return Math.floor(Math.random() * (255 - 0 + 1)) + 0 } let red = random() let green = random() let blue = random() document.body.style.background = `rgb(${red},.
DOM操作,隔行换色
weixin_65014714的博客
02-04 1248
这两种方法都是行内样式,都是点击事件,后续我还会上传通过css样式,控制背景色,还有鼠标进入离开的隔行换色
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
10-23
本篇文档将深入介绍如何使用jQuery来实现实时改变网页字体大小、字体背景色和颜色的功能。 1. jQuery与CSS方法的结合使用 文档中提到，通过jQuery的css()方法可以动态地操作页面元素的样式。css()是jQuery中用于...
js获取及修改网页背景色和字体色的方法
10-23
同样，如果你想修改字体颜色，只需将`backgroundColor`替换为`color`即可。 通过理解并运用上述方法，开发者可以轻松地在JavaScript中实现对网页元素颜色的获取和修改，从而丰富和优化网页的交互效果。
layer ui插件显示tips时,修改字体颜色的实现方法
10-16
`{ tips: [3, '#fff'] }`中的`tips`是Layer UI的配置项，其中第一个参数`3`表示tips的类型为气泡，第二个参数`'#fff'`定义了tips背景颜色为白色。 这种方法的优点是简单直接，不需要对Layer UI框架进行深入修改，只...
extjs grid设置某列背景颜色和字体颜色的方法
10-28
'`来改变背景颜色，同样也可以设置`color`属性来改变字体颜色。如下所示： ```javascript { header: '编号', dataIndex: 'fcId', css: 'background: #FF0000; color: #00FF00;', // 设置背景色和字体色 width...
微信小程序点击移除添加class（点击改变背景颜色和字体颜色）
03-29
微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。 !--页面-- v...
javascript DOM编程艺术学习笔记（5）通过DOM来设置样式案例
彬go的专栏
04-18 832
********* 通过DOM来设置样式案例2： PS：这边为什么要用js来修改呢，而不用CSS？ 因为假如我们用CSS来设置样式，则必须使用高级的选择器，但是有些浏览器是不支持的； 假如为相应的行加上CLASS也是可以完成的，但是当我们要改变表格的行和列的时候，这时就得 为新添加的行和列手动添加class，所以这样是非常不灵活的，为此我们可以采用JS DOM来解决； JS DOM擅长
DOM实现网页一键换肤
北冥木鱼技术博客
04-11 4767
在个性化页面制作里经常会用到一键换肤功能，其中包括更换背景、文字颜色、按键背景色等等一套样式。这个功能可以用DOM完成。 1、思路 设计四个按键，分别对应四套样式，点击样式即可改变背景。 代码思路是，html写四个按钮分别对应四个JavaScript函数，CSS写四个样式分别对应四个id，JavaScript部分的功能是改变标签的id使其对应CSS中的样式即可。 2、HTML部分
DOM基础3-13 编程练习
请叫我二狗哥
05-12 568
3-13 编程练习 小伙伴们，今天我们学习了onchange鼠标事件，根据gif图，补充代码，实现下列功能： （1） 选择下拉列表中不同的选项，页面中的div就设置成不同的背景颜色，div中的内容也发生变化。 比如：选择黄色选项，div的背景颜色就变为黄色，文本内容就变为“我的背景颜色变成了yellow色” （2）当选择下拉列表中的“请选择”时，div的背景颜色...
JavaScript基础-DOM
安南的博客
06-09 402
任务： DOM的简介(了解) DOM节点的操作 DOM的简介 DOM 概念 DOM(Document Object model-文档对象模型)。 指将HTML页面或xml页面解析成对象模型，能够利用一些内置api在程序中操作页面上的标签。DOM核心在于学会运用内置的api来完成程序(js代码)和页面之间的交互.DOM是一种技术标准，并不属于任何一种编程语言，只是JavaScript内置了 DOM的实现，即JavaScript内置了可以操作HTML页面的api，JavaSc...
Vue2自定义指令及事例
qq_54598736的博客
10-11 1131
Vue2自定义指令及事例
js--Dom(四) 样式+节点操作
司天宏的博客
01-15 1239
样式操作—获取和设置样式 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;l
DOM(如何设置元素样式）
qq_43614064的博客
11-11 1127
语法：注意：styleName，样式的名称必须写成驼峰式，比如：border-left写成borderLeft 实例： <ul id="list1"> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // 设...
js操作dom方法
雪落凡尘
08-08 251
DOM节点获取 var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s parentNo
改变字体大小和背景颜色JS
最新发布
09-11
JavaScript（JS）是一种广泛使用的脚本语言，可以通过操作DOM（文档对象模型）来改变网页上的字体大小和背景颜色。以下是一个简单的示例，展示了如何使用JavaScript来实现这些功能： 1. 改变字体大小： ```javascript // 获取要改变字体大小的元素 var element = document.getElementById("myElement"); // 设置字体大小 element.style.fontSize = "24px"; ``` 这段代码首先通过`getElementById`方法获取了一个元素，假设这个元素有一个ID为`myElement`。然后，我们通过修改该元素的`style.fontSize`属性来改变其字体大小。 2. 改变背景颜色： ```javascript // 获取要改变背景颜色的元素 var element = document.getElementById("myElement"); // 设置背景颜色 element.style.backgroundColor = "#ff0000"; ``` 这段代码与改变字体大小的代码类似，只是这次修改了元素的`style.backgroundColor`属性来设置其背景颜色。 请注意，为了使这些改变生效，元素必须存在于HTML文档中，并且在JavaScript代码执行前已经加载完成。如果要在页面加载时立即应用这些样式，可以在`window.onload`事件处理器中执行上述代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值