通过js改变div的样式

最新推荐文章于 2024-04-08 20:51:35 发布
最新推荐文章于 2024-04-08 20:51:35 发布
阅读量7.8k 收藏 3
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44543189/article/details/86658642
版权

开发工具与关键技术：DW 、 js
作者：陆桂超
撰写时间：2019年1月26日

下面我们通过js改变div的样式，我要实现的功能是通过js改变div的宽度、高度、和背景颜色。
1、点击设置，便会弹出遮罩层。
在这里插入图片描述
2、在遮罩层上面标记了想要设置的样式，通过点击上面的数值，div就会发生改变，点击取消，div就会变回原来的样式，点击取消遮罩层就会隐藏。
在这里插入图片描述
3、遮罩层的布局如下图代码。
在这里插入图片描述
4、功能的实现是由下面的js代码完成。
在这里插入图片描述

陆桂超
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript改变地图DIV大小
12-14
5. **改变Div大小**：当需要改变地图的大小时，可以通过JavaScript操作`<div>`的`style`属性。例如，如果你有一个按钮，用户点击后可以扩大地图，你可以这样做： ```javascript function resizeMap() { var div =...
js更改div样式
VibMike的博客
05-29 3862
1、先创建一个容器用于存放按钮 2、给这些按钮写一个标题 3、添加按钮（更改元素宽、高、背景颜色、边框大小） 4、给div设置样式，居中，看下效果 5、 继续完善按钮（包括边框类型选择、边框颜色、边框弧度以及应用按钮） 6、给不同等长度的按钮设置好长度，让其看起来更加美观 7、写一个用于接受更改的div，并设置其样式 8、获取各个选项框 9、原理是获取选项框的内容来更改元素的style 10、直接更改选项框和背景颜色即可更改div了；这.
通过JS给div元素设置样式的几种方法
xiamoziqian的博客
12-17 1万+
一、style &amp;amp;lt;div&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; //js部分 &amp;amp;lt;script&amp;amp;gt; var oDiv = document.querySelector(&amp;quot;div&amp;quot;); //第一种方法：分别添加属性 oDiv.style.width = &amp;quot;2
08JS操作DIV样式
Blog of Lytracy
09-07 2362
1、操作步骤 先创建⼀个div获取到div元素，然后对其进⾏操作 创建div 和操作按钮 获取div和按钮 给按钮添加点击事件 操作div样式 2、示例 实现⼀个“⿏标移⼊，div背景颜⾊变成红⾊，⿏标移出，背景颜⾊变回⽩⾊”的效果。 第⼀步：我们要知道⿏标移⼊事件和⿏标移出事件 ⿏标移⼊事件 `onmouseover` ⿏标移出事件 `onmouseout` 第⼆步：我们要找到需要改变的div元素 我们通过`id`就可以找到我们要改变的`div` 第三步：我们要对修
向js中传参来动态改变div的样式
psjasf1314的博客
04-11 845
内容描述：通过三个按钮来改变一个div的样式，用js来实现，对于要修改不同的样式，需要两个参数，一个是样式名称，一个是样式值，但是在修改时只能用 v1.style[name] = value; 不能使用 v1.style.name = value; 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</titl
JS中的DOM-5(JavaScript动态修改样式)
最新发布
小余的前端博客
04-08 1013
方法返回的对象是一个只读对象，其中包含了指定元素的所有计算后的样式属性及其对应的值。接受两个参数，第一个参数是要获取样式的元素，第二个参数是伪元素（可选）。伪元素参数可以用来获取指定元素的伪元素计算后的样式，例如获取元素的。它返回一个对象，其中包含了指定元素的所有计算后的样式属性及其对应的值。// 输出：DOMTokenList ["btn-primary"]// 输出：DOMTokenList ["active"]// 检查按钮是否包含指定的类名。// 移除按钮的类名。// 切换按钮的类名。
JavaScript动态改变div属性的实现方法
12-08
这里可以通过JS动态改变div属性，样式等 [removed] var oBox = document.getElementById('box'); var oDiv = document.getElementById('div1'); var aInput = document.getElementsByTagName('input'); var ...
8个点改变div大小js
05-25
标题中的“8个点改变div大小js”是指利用JavaScript（可能结合JQuery库）来实现一个功能，允许用户通过拖动八个预定义的控制点来动态调整div元素的大小。这种技术在网页设计中非常实用，尤其是在创建可交互、自定义...
js实现DIV的一些简单控制
10-30
JavaScript 提供了多种方式来操作 DIV，例如使用 getElementById() 方法来获取 DIV 对象，然后使用 style 属性来改变其样式。 在我们的示例代码中，我们首先使用 CSS 来定义三个 DIV 的样式，然后使用 JavaScript ...
js实现div层缓慢收缩与展开的方法
12-10
这个实例中，我们看到的是一个简单的JavaScript代码，它通过监听用户的点击事件来改变div元素的高度，从而实现层的伸缩效果。以下是这个功能的详细分析： 1. **DOM元素选择与操作**： - `toggle` 函数接收一个参数...
JavaScript动态设置div的样式的方法
10-23
主要介绍了JavaScript动态设置div的样式的方法的相关资料,需要的朋友可以参考下
JS中修改元素内容，属性，样式的方法【详解】
杜永康的博客
10-29 4521
如果把属性作为集合，那么样式就是这个集合的元素。样式（style）也是一种属性，样式后面的内容是样式（style）的属性值 属性值里面的内容为 样式名：样式值。所以这种修改有这个特点：修改后的内容会把之前原有的内容覆盖掉，只执行修改后的内容。这种方式，方便我们调试功能，修改元素属性。法一：获取元素名.style.样式名=‘样式值’法二：获取元素名.style=‘样式名：样式值’，color是样式名，red是样式值。获取元素名.属性名=‘属性值’
java div style_用js实现改变随意改变div属性style的名称和值的结果
weixin_30174223的博客
02-23 452
一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下：函数传参，改变Div任意属性的值body,p{margin:0;padding:0;}body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;}#outer{width:300px;margin:0 auto;}p{margin-bottom:10px;}butto...
JS动态设置div样式
落雨心星
07-20 4693
<script> window.onload=function(){ if("index"=="${requestScope.page}"){ document.getElementById("index").className="active"; } </script> 如上，js利用id获取div对象，对...
js改变style样式和css样式
热门推荐
youyajie的专栏
10-07 24万+
js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下: Change.html --> function test4(event) { if(event.value == "黑色") { //获取div1
JS修改元素的样式
乔的博客
06-09 2万+
<html> <head> <style> #a{ width:700px; height:300px; font-size:50px; color:red; background-color:grey; z-index:2; position:absolute; top:13...
用JS改变html样式
张致豪
06-13 1万+
用JS改变HTML样式 在html中定义样式的方法有3种： 通过link标签链接外部样式 使用style标签定义嵌入式样式 使用标签style属性定义样式 用JS改变的HTML样式无非就是上面三种，改变样式只需要解决两个问题 找到要更改样式的元素 更改样式 更改link链接的外部样式 html> head> title>title> link rel="sty
js 改变div class 的width值
04-20
好的，这是一个关于 JavaScript 的编程问题。你可以使用 JavaScript 来改变 div 元素的 class 属性值，从而改变其样式属性，包括 width 值的改变。以下是一个简单的示例代码： ```html <div id="myDiv" class="originalClass">Hello World!</div> <script> // 获取 div 元素 var myDiv = document.getElementById("myDiv"); // 修改 class 属性值 myDiv.className = "newClass"; // 获取新的 div 元素 var newDiv = document.getElementById("myDiv"); // 修改 width 属性值 newDiv.style.width = "50%"; </script> ``` 以上代码将 div 元素的 class 属性值从 "originalClass" 改变为 "newClass"，然后将其宽度改为 50%。请注意，如果您在动态修改样式属性时遇到问题，请确保样式表具有正确的选择器和规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值