用js实现改变随意改变div属性style的名称和值的结果

最新推荐文章于 2022-10-29 06:00:00 发布
最新推荐文章于 2022-10-29 06:00:00 发布
阅读量3.9k 收藏 1
点赞数 1
分类专栏： html css js 文章标签： css javascript jquery html 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfcss/article/details/8980446
版权
js 同时被 3 个专栏收录
101 篇文章 0 订阅
订阅专栏
css
94 篇文章 1 订阅
订阅专栏
html
46 篇文章 0 订阅
订阅专栏

 

    一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>函数传参，改变Div任意属性的值</title>
    <style type="text/css">
        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;}
        button{margin-right:5px;}
        label{width:5em;display:inline-block;text-align:right;}
        input{padding:3px;font-family:inherit;border:1px solid #ccc;}
        #div1{color:#fff;width:180px;height:180px;background:#000;margin:0 auto;padding:10px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>函数传参，改变Div任意属性的值</title>
    <style type="text/css">
        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;}
        button{margin-right:5px;}
        label{width:5em;display:inline-block;text-align:right;}
        input{padding:3px;font-family:inherit;border:1px solid #ccc;}
        #div1{color:#fff;width:180px;height:180px;background:#000;margin:0 auto;padding:10px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        /*var changeSytle = function (elem,name,value){
            elem.style[name] = value;
        }
        window.onload = function (){
            var oDiv = document.getElementById("div1");
            var oBtn = document.getElementsByTagName("button");
            var oInput = document.getElementsByTagName("input");
            oBtn[0].onclick = function (){
                changeSytle (oDiv,oInput[0].value,oInput[1].value)
            } ,
                    oBtn[1].onclick = function (){
                        oDiv.removeAttribute("style");
                    }
        }  */原生js部分实现



        $(function(){
            $("button:first").click(function(){
                var styleName= $("#outer").find("input:first").val();
                var styleVal = $("#outer").find("input:last").val();
                $("#div1").css(styleName,styleVal);
            })
            $("button:last").click(function(){
                $("#div1").removeAttr("style");
            })
        })

    </script>

</head>
<body>
<div id="outer">
    <p><label>属性名：</label><input type="text" value="background" name="styleName" /></p>
    <p><label>属性值：</label><input type="text" value="blue" name="val" /></p>
    <p><label></label><button>确定</button><button>重置</button></p>
</div>
<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>

</body>
</html>
        $(function(){
            $("button:first").click(function(){
                var styleName= $("#outer").find("input:first").val();
                var styleVal = $("#outer").find("input:last").val();
                $("#div1").css(styleName,styleVal);
            })
            $("button:last").click(function(){
                $("#div1").removeAttr("style");
            })
        })

    </script>

</head>
<body>
<div id="outer">
    <p><label>属性名：</label><input type="text" value="background" name="styleName" /></p>
    <p><label>属性值：</label><input type="text" value="blue" name="val" /></p>
    <p><label></label><button>确定</button><button>重置</button></p>
</div>
<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>

</body>
</html>



前端岚枫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生js练习之改变div属性
weixin_44580139的博客
10-19 466
原生js练习 改变div属性 效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0px; margin: 0p...
js修改style样式_Vue 动态样式黑魔法（超实用）
weixin_39927993的博客
11-21 2392
​ 众所周知，Vue 中动态绑定样式是用 :style，或者是动态绑定 :class class，不同的 class 样式提前写好且不一样。但是如果是 ::after伪元素或者要改变的样式用 js 计算很复杂但是用 CSS 计算很简单的话，这种方法就略显得麻烦。有没有什么办法能用 Vue 直接改变 CSS，而不用这一套绑定的办法呢。答案是有的！​ 这里给出两个实现方案。第一...
JS中修改元素内容，属性，样式的方法【详解】
杜永康的博客
10-29 4447
如果把属性作为集合，那么样式就是这个集合的元素。样式（style）也是一种属性，样式后面的内容是样式（style）的属性值 属性值里面的内容为 样式名：样式值。所以这种修改有这个特点：修改后的内容会把之前原有的内容覆盖掉，只执行修改后的内容。这种方式，方便我们调试功能，修改元素属性。法一：获取元素名.style.样式名=‘样式值’法二：获取元素名.style=‘样式名：样式值’，color是样式名，red是样式值。获取元素名.属性名=‘属性值’
js更改div样式
VibMike的博客
05-29 3796
1、先创建一个容器用于存放按钮 2、给这些按钮写一个标题 3、添加按钮（更改元素宽、高、背景颜色、边框大小） 4、给div设置样式，居中，看下效果 5、 继续完善按钮（包括边框类型选择、边框颜色、边框弧度以及应用按钮） 6、给不同等长度的按钮设置好长度，让其看起来更加美观 7、写一个用于接受更改的div，并设置其样式 8、获取各个选项框 9、原理是获取选项框的内容来更改元素的style 10、直接更改选项框和背景颜色即可更改div了；这.
JS修改样式属性
Revin的博客
01-08 3563
JS修改样式属性
JavaScript style 样式
ln201009的博客
02-21 7145
1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为JavaScript style 样式。 2、我们就先设置一个div，然后style样式设置div的样式属性。图二就是我们设置好的这个div的样式 3、接下来我们运用script这个标签来设置js的内容，也就是要运用js改变我们用style设置的样式。 4、我们要设置哪个内容就要先获取到哪个元素，正如这个我们要获取到那个div，我们就要通过获取div的id名
原生js实现改变随意改变div属性style的名称和值的结果
10-26
在本文将为大家介绍下如何用原生js和jQuery实现随意改变div属性，和重置，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
原生js和jQuery随意改变div属性style的名称和值
12-10
一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>函数传参，改变Div任意属性的值</title...
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
10-27
用原生js和jQuery实现随意改变div属性和重置,在输入框输入“属性名”及“属性值”，点击确定按钮查看效果，感兴趣的你可不要错过了哈
JS setAttribute()方法：设置元素的属性值
风口上的猪博客
11-08 1万+
在JavaScript中，使用元素的 setAttribute() 方法可以设置元素的属性值。用法如下： setAttribute(name, value) 参数 name 和 value 分别表示属性名称和属性值。属性名和属性值必须以字符串的形式进行传递。如果元素中存在指定的属性，它的值将被刷新；如果不存在，则setAttribute() 方法将为元素创建该属性并赋值。 示例1 下面示例分别为页面中 div 元素设置 title 属性。 <div id="red">红...
通过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 2316
1、操作步骤 先创建⼀个div获取到div元素，然后对其进⾏操作 创建div 和操作按钮 获取div和按钮 给按钮添加点击事件 操作div样式 2、示例 实现⼀个“⿏标移⼊，div背景颜⾊变成红⾊，⿏标移出，背景颜⾊变回⽩⾊”的效果。 第⼀步：我们要知道⿏标移⼊事件和⿏标移出事件 ⿏标移⼊事件 `onmouseover` ⿏标移出事件 `onmouseout` 第⼆步：我们要找到需要改变的div元素 我们通过`id`就可以找到我们要改变的`div` 第三步：我们要对修
JavaScript笔记
dg_xdg的博客
08-02 1318
从基本数据类型到DOM的操控
JS 修改元素属性的六种方式
热门推荐
boonyaxnn的博客
04-04 3万+
方式一、 1.setAttribute 描述：设置元素的【属性】 语法：元素名.setAttribute('属性','属性值'); 例子： box.setAttribute('style','background-color:red;height:400px'); 注意：设置的是行内样式 2.getAttribute 描述：获取属...
JS 样式操作学习总结。
weixin_30322405的博客
07-29 286
在我们编写网页的时候，样式表示我们常常需要相伴的内容，谁然很招人烦。恕我前端菜鸟对这东西很是无力啊。下面是我在代码浪潮中的虚席到的一些东西。 1、样式表内容修改方式。 2、当前元素样式内容获取。 3、document.styleSheets内容。 1.首先我们从最简单的开始，样式表修改。 　　我们在编写网页的时候通常需要对元素进行一些显示样式内容的修改，这是我们其实是有许多种方法的...
java div style_用js实现改变随意改变div属性style的名称和值的结果
weixin_30174223的博客
02-23 442
一些简单的例子，用原生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修改style属性
cainiaoxuexue的博客
03-16 2万+
用下面方式document.getElementById(ID).style.display="";
原生js点击按钮改变盒子的left值使盒子移动
u010234868的专栏
08-16 3461
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; position: relative; /*右移位置改变脱离文档流*/ } .
用js实现随机改变div的背景颜色
最新发布
05-10
可以使用如下的代码实现： ```html <div id="myDiv">这是一个div</div> ``` ```javascript // 获取div元素 var div = document.getElementById("myDiv"); // 定义颜色数组 var colors = ["red", "blue", "green",...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端岚枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值