js中改变元素的属性

最新推荐文章于 2023-09-08 22:00:00 发布
置顶 最新推荐文章于 2023-09-08 22:00:00 发布
阅读量6.3k 收藏 3
点赞数 1
分类专栏： Javascript知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TC_16_zl/article/details/73048934
版权

        js中改变元素属性的方法

    1、js中改变元素的属性值

       格式：某元素.style.某属性 = '改变值';

       例如：oDiv.style.width = '300px';

       在js中如果遇到类似font-size这种属性，需要将其写为fontSize，在对它的值进行改变

2、js中改变元素的浮动值时会遇到兼容性的问题

        IE情况下  styleFloat   非IE情况下 cssFloat

        在设置元素的浮动属性时，为了兼顾其兼容性，我们一般便会这两个都进行设置

        例如：oDiv.style.styleFloat = 'left';

                   oDiv.style.cssFloat = 'left';

        为了避免我们设置浮动时要考虑它的兼容性，有以下一种方法

         .left{ float:left;}

         .right{ float:right;}

         oDiv.className = 'left';

         oDiv.className = 'right';

        此方法可以很有效的避免考虑浮动的兼容性的问题

3、在js中改变元素的属性值可以用[ ]

      在js中所有位置的"."都可以由"[ '变量名' ]"进行代替

      js中style后的"."属性值是固定的，是不可以改变的

      js中style后的"[ ]"属性值是可以改变的，不是固定的值

     用以下代码进行举例并进行解释

     <!DOCTYPE html>
     <html>
     <head>
        <meta charset="utf-8">
        <title>js的简单练习</title>
        <style>
             div{ height:100px; width:100px; border:1px solid red;}
        </style>
        <script>
             window.onload = function(){
                var oAttr = document.getElementById('attr');
                var oVal = document.getElementById('val');
                var oBtn = document.getElementById('btn1');
                var oDiv = document.getElementById('div1');
                oBtn.onclick = function(){
                    oAttr.value
                    oVal.value
                    oDiv.style[oAttr.value] = oVal.value;
                };
             };
        </script>
    </head>
    <body>
        <h1>js的简单的效果实现</h1>
        请输入属性名称：<input type="text" id="attr" value="" /><br />
        请输入属性值：<input type="text" id="val" value="" />
        <input type="button" id="btn1" value="确定" />
        <div id="div1"></div>
    </body>
    </html>

此代码的实现效果

可以通过改变属性的名称、属性名称的值对下面的div的属性进行改变

这是"[]"有的性能，而"."则不具备此种能力

      

Strive_18
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript改变HTML元素的样式改变CSS及元素属性
10-26
改变CSS及元素属性的方法有很多，在本文将为大家介绍下使用js是如何做到的，感兴趣的朋友可以感受下
js修改对象的属性的两种方法(十分好用)
逍遥的码农的博客
06-10 8262
在我们开发的过程中，后端返回的字段可能和我们组件复用的字段名字不同，这时候为了更方便的开发，我们采用修改后端返回的对象字段来匹配组件中的对象字段 第一种正则匹配替换 <script> var obj = { id: 1, name: '程序猿', age: 16, } var objReplace = JSON.stringify(obj) //首先给对象转换成字符串 console.log(objReplace)
自定义属性
qq_44378009的博客
12-05 793
1.5. 自定义属性操作 1.5.1 获取属性值 <div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); //(2) elemen...
JS中修改元素内容，属性，样式的方法【详解】
杜永康的博客
10-29 4429
如果把属性作为集合，那么样式就是这个集合的元素。样式（style）也是一种属性，样式后面的内容是样式（style）的属性值 属性值里面的内容为 样式名：样式值。所以这种修改有这个特点：修改后的内容会把之前原有的内容覆盖掉，只执行修改后的内容。这种方式，方便我们调试功能，修改元素属性。法一：获取元素名.style.样式名=‘样式值’法二：获取元素名.style=‘样式名：样式值’，color是样式名，red是样式值。获取元素名.属性名=‘属性值’
JS 修改元素属性的六种方式
boonyaxnn的博客
04-04 3万+
方式一、 1.setAttribute 描述：设置元素的【属性】 语法：元素名.setAttribute('属性','属性值'); 例子： box.setAttribute('style','background-color:red;height:400px'); 注意：设置的是行内样式 2.getAttribute 描述：获取属...
04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作
最新发布
狮子座的男孩
09-08 3225
/ 想将obj中的flag值，根据不同的值来变化(即：修改对象中原有的属性值)；
原生js修改属性的六种方法
qq_43654065的博客
12-22 2294
转载： JS 修改元素属性的六种方式_boonyaxnn的博客-CSDN博客_js设置元素属性方式一、1.setAttribute 描述：设置元素的【属性】 语法：元素名.setAttribute('属性','属性值'); 例子： box.setAttribute('style','background-color:red;height:400px'); 注意：设置的是行内样式2.getAttribute 描述：获取属...https://blog.csdn.net/boonyaxnn/article/d
一张图轻松掌握如何通过JS修改元素的内容与属性
qq_51732393的博客
11-03 869
通过JS修改元素的内容、属性
js中修改css样式两种方法
lucky_girl_girl的博客
03-13 629
在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <met...
JS修改元素属性
热门推荐
Ghjkku的博客
06-05 13万+
JS修改元素属性
JavaScript动态改变div属性的实现方法
10-23
主要介绍了JavaScript动态改变div属性的实现方法,涉及javascript操作页面div元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
快速解决js动态改变dom元素属性后页面及时渲染的问题
10-22
下面小编就为大家带来一篇快速解决js动态改变dom元素属性后页面及时渲染的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS函数修改html的元素内容,及修改属性内容的方法
10-21
下面小编就为大家带来一篇JS函数修改html的元素内容,及修改属性内容的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js for循环中实现进度条 & 快速解决js动态改变dom元素属性后页面及时渲染的问题
03-15
js for循环中实现进度条 & 快速解决js动态改变dom元素属性后页面及时渲染的问题
js实现点击置顶
努力的zhiyi
12-01 1万+
js实点击置顶的功能 需要掌握的知识点 1、js中的scrollBy() 方法 把内容移动指定的尺寸，单位是像素 scrollBy(x,y) x 必填 —— 内容向右移动的尺寸 y 必填 —— 内容向下移动的尺寸 2、js中的scrollTop()方法 获得元素滚动条内的顶部隐藏部分的高度 scrollTop属性只有DOM元素才有， window/document没有。
js中函数的传递参数
努力的zhiyi
06-22 6896
js中函数的传递参数 一、js中函数传递参数      1、函数传递的参数类型  =  js的数据类型            数字、字符串、布尔值、数组、函数、对象、未定义           1)数字             代码如下：              fn1(100);              function fn1(a){  //相当于var a = 100;
js中的onclick事件在ul获取li时点击两次才会执行的原因
努力的zhiyi
05-12 4874
js中的onclick事件在ul获取li时点击两次才会执行的原因下面的代码中 只有onclick第二次才会执行函数内部的代码代码实例如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;js点击事件&lt;/title&gt;
js中数据转换中的NaN属性，isNaN()的用法
努力的zhiyi
06-20 2336
js中数据转换中的NaN属性，isNaN()的用法 一、NaN属性        1、NaN：NaN:not a number 不是一个数字 但是数字类型              var a = Number('abc');              alert(a); //NaN              alert(typeof a); //number        2、NaN
fabricjs 点击改变元素属性
05-17
要在fabric.js中点击元素并更改其属性，您可以使用以下步骤： 1. 首先，您需要在canvas上创建一些对象，例如rect或circle等。 2. 然后，您可以添加以下代码来监听canvas上的点击事件： ```javascript canvas.on('mouse:down', function(event) { var target = canvas.findTarget(event.e); // your code here }); ``` 这将检查canvas上的鼠标事件，并返回被点击的对象。 3. 接下来，您可以使用以下代码更改对象的属性： ```javascript target.set({property: value}); canvas.renderAll(); ``` 这将更改被点击的对象的属性，并重新渲染canvas。 4. 最后，您可以添加其他代码来处理对象属性更改的逻辑，例如更新UI或将更改保存到数据库中。 完整示例代码： ```javascript var canvas = new fabric.Canvas('canvas'); // create a rectangle object var rect = new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 50, height: 50 }); // add the rectangle to the canvas canvas.add(rect); // listen for mouse down event on canvas canvas.on('mouse:down', function(event) { // check if an object was clicked var target = canvas.findTarget(event.e); if (target) { // change the object's fill color to blue target.set({fill: 'blue'}); canvas.renderAll(); } }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值