js:原生封装setCss(三个参数是设置,设置行间属性curEle.style[attr]=val)

最新推荐文章于 2023-09-08 08:46:07 发布
最新推荐文章于 2023-09-08 08:46:07 发布
阅读量656 收藏 1
点赞数
原文链接：https://juejin.im/post/5c68f394f265da2db3054241
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.setCss</title>
    <style>
        html,body,div{
            margin: 0;
            padding: 0;
        }
        #parent{
            width: 200px;
            height: 200px;
            background: greenyellow;
        }
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="parent">
<div id="box">点me</div>
</div>
<script>
 var oParent=document.getElementById('parent');
 var oBox=document.getElementById('box');
 oBox.onclick=function(){
      setCss(oParent,'width',400);
      setCss(oBox,'height',600);
      setCss(oParent,'position','relative');
      setCss(oBox,'position','absolute');
      setCss(oBox,'margin',10);
      setCss(oBox,'padding',10);
      setCss(oBox,'top',20);
      setCss(oBox,'left',30);
 };
 var val;
 function setCss(curEle,attr,val){
          var reg=/^(width|height|margin|padding|top|right|bottom|left|font-size|opacity|float|position)$/;
          if(reg.test(attr)){
             if(typeof val==='number'){
                val+='px';
             }
          }
          curEle.style[attr]=val;
 }
</script>
</body>
</html>
复制代码
weixin_33743880
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js学习总结----设置元素的样式值setcss
weixin_30235225的博客
07-11 244
在JS给元素设置样式属性值，我们只能通过curEle.style[attr] = value 这种方式给元素设置行内样式 下面封装一个给当前元素的某一个样式属性设置值的方法（增加在行内样式上的）：setCss() function setCss(curEle,attr,value){ //在JS中设置float样式值也需要处理兼容 ...
JS修改css样式的8种方式
奔跑的面条博客
04-12 1万+
从其他人的博客上看到的，感觉归纳的很棒，在这里种个草。 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有’-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style[‘text-align’] = ‘100px’; element.style.height = '100px'; 直接设置属性...
JS 操作style属性
yuxuan89814的专栏
05-04 1134
操作style属性 #div1{ width:100px; height:100px; background:red; } function setStyle(name,value){ var oDiv=document.getElementById('div1'); oDiv.style[name]=value; //操作属性方法二：[’属性名‘]里面属性名可用变量代替
set.css
chen_wen_xian的专栏
09-16 669
@charset "utf-8"; /* CSS Document */ /*21cn 相同样式*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0} /* dt标签定义
【JavaScript】 - 添加多个属性样式
m0_55960697的博客
03-24 1353
let div = document.querySelector('.divborder') function setStyle(obj, sty) { for (var i in sty) { obj.style[i] = sty[i]; } } setStyle(div, { color: 'green', display: 'block' }); // setStyle(获取的元素，对...
js学习总结之DOM2兼容处理顺序问题的解决方法
10-19
这个函数接受三个参数：要绑定事件的元素`curEle`、事件类型`evenType`和事件处理函数`evenFn`。对于支持`addEventListener`的浏览器，函数直接调用该方法。而对于不支持的浏览器（如IE），函数通过`attachEvent`来...
基于JavaScript canvas绘制贝塞尔曲线
10-17
在JavaScript中，Canvas API是一个强大的工具，用于在网页上动态绘制图形。贝塞尔曲线是Canvas API中的一个重要元素，常用于创建平滑的曲线路径。在这个示例中，我们看到如何利用JavaScript和HTML5 Canvas来绘制并...
js学习总结之DOM2兼容处理this问题的解决方法
10-19
为了解决这个问题，我们可以编写一个名为`bind`的函数，它接受三个参数：`curEle`（要绑定事件的元素），`evenType`（要绑定的事件类型），以及`evenFn`（要绑定的事件处理函数）。在`bind`函数内部，首先检查是否...
js学习总结之DOM2兼容处理重复问题的解决方法
10-19
`addEventListener` 和 `removeEventListener` 支持第三个参数，用于设置事件处理函数在事件触发时是否阻止事件冒泡。而`attachEvent` 和 `detachEvent` 不具备这个功能，因此在实现兼容时需要额外处理。 文章中给...
js批量设置style属性
lean1252的专栏
03-19 3665
JS中给一个html元素设置css属性，可以通过style属性来操作 [code="java"] var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block";[/code] ...
js设置style样式
热门推荐
gaidandan的专栏
08-13 2万+
删除属性:obj.style.属性名 = ""; 读取属性：属性 = obj.style.属性名; 设置属性：obj.style.属性名 = “属性值”;
网站开发进阶（六十）：Javascript追加style样式
IT全栈 华强工作室
04-22 2926
前言 在前端开发过程中，会遇到js实现业务逻辑的时候代码式追加元素样式的应用场景。 思路 1、通过拼接cssText方式实现。 2、通过设置class，累加设置class方式实现 。 代码示例 1、第一种方式可以应用下面函数实现，el表示待追加样式的dom节点，strCss表示待追加的样式。 function setStyle(el, strCss){ function endsWith(str, suffix) { var len = str.length - suffix.len
js获取屏幕宽度_Flutter屏幕适配
weixin_39571938的博客
11-25 304
Flutter屏幕适配 目前移动端的设备已经非常多，并且不同的设备手机屏幕也不相同。 目前做移动端开发都要针对不同的设备进行一定的适配，无论是移动原生开发、小程序、H5页面。 Flutter中如何针对不同的手机屏幕来进行适配呢？我们一起来聊聊这个话题。一. Flutter单位 1.1. Flutter中的单位在进行Flutter开发时，我们通常不需要传入尺寸的单位，那么Flutter使用的是什么单...
原生Javascript/原生JS修改CSS样式的四种方式
YunWisdom
05-09 6607
原生Javascript/原生JS修改CSS样式
一文搞懂ss/css/css_set/cgroup/hierarchy的关系
susu_xi的博客
06-11 1364
ss, css, css_set, cgroup, cgroup hierarchy的简单定义描述及他们的关系梳理
JS数据结构——Set（集合）详解
最新发布
Cuichenyang158的博客
09-08 1万+
Set类似于数组，但是成员的值都是唯一的，没有重复的值。也就是说它是一系列无序，没有重复数值的数据集合。很多时候我们把Set叫做集合,但是，Set可以是集合，集合不一定是Set。
原生JS设置CSS样式有多少方式
小天才程序员的博客乐园
06-21 4149
element.style 和 element.style.cssText有什么区别 原生 JS 调整样式方式有 3 种。 element.style 使用驼峰形式 !important 权重无效 document.getElementById("box").backgroundColor = "red" // !important 无作用，下面两句是等效的 document.getElementById("box").style.color = "red !important" document
JavaScript中Set的使用
m0_51636525的博客
06-11 9750
在ES6之前，我们主要使用数组、对象来存储数据；在ES6中新增了另外两种数据结构：Set、Map和WeakSet、WeakMap。Set有点类似于Array数组，但是和数组的区别是Set的元素不能重复。先不考虑Set的创建方法，通过案例来演示Set和Array数组的区别。我们需要通过Set的构造函数创建Set（没有字面量创建的方式）...............
手把手带你用原生js实现css属性的set和get
qq_25600055的专栏
11-02 1009
https://segmentfault.com/a/1190000008258365 Let's start 首先创建一个 css-tool.js 文件，一开始他是这个样子的： ;(function (window,undefined) { "use strict"; var cssTool = function () { return new cssTo
JS批量给元素添加css样式或attr标签
深南大道
04-26 2991
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值