在JS中使用修改CSS样式的相关方法和问题点

最新推荐文章于 2021-07-07 11:22:07 发布
最新推荐文章于 2021-07-07 11:22:07 发布
阅读量79 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiuyehengxia/article/details/103557083
版权

基本方法:

使用document.getElementById等方法获取到DOM元素, 然后直接设置其CSS样式:
let Box = document.getElementById(‘root’);
Box.style.background=“red”;

注意点:

  1. JS中不能直接使用float, 而需要使用styleFloat
jiuyehengxia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.getelementbyid css,使用document.getElementById（）从css获取值。style.height javascript...
weixin_31558841的博客
08-04 2204
我试图通过var high = document.getElementById("hintdiv").style.height;alert(high);摆脱一个div框高度值，如果属性包含div标签里我能得到这个值就好了，但它返回如果属性为空值在css部分中定义。这很好，它显示100px为一个值。该值可以被访问。..var high = document.getElementById("hintd...
javaScript 操作节点(Element)、设置css样式
chijiajing的博客
05-31 1万+
操作节点(Element)：firstElementChild跟firstChild的区别在于，有Element代表元素，firstElementChild是元素选择器，非元素他是不会选择到的，如文本之类的。而firstChild是所有都选择，包括文本。...
获取document对象除了getElement方法，居然还可以使用css选择器方法！！！
TimyChen的博客
01-10 2012
例子： example pre{ border: thin solid black; } There are lots of different kinds of fruit.There are over 500 varieties of banana alone.By the time we add the countless types o
js通过标签元素id，用document.getElementById().style设置标签元素的css属性
此人很懒，什么都没有写
07-07 1万+
参考：https://blog.csdn.net/kissing7/article/details/8924112 对定义了id的html标签元素，js可以通过以下方法修改标签元素的css样式： 方法一： 对标签定义一个css样式： document.getElementById(“idname”).style.display=“none”; 方法二： 对标签定义多个css样式： var a = document.getElementById(“idname”); with(a.style){ color
javascript下用getElementByClassName获取css定义的类选择符（.class），兼容FF和IE
Web前端开发
10-28 3395
我们都知道在使用原生javascript时，获取类选择符时，即使用getElementByClassName，它在FF和IE下是不能兼容。FF下是可以用它获取的到元素而IE不行，相当悲催的说~所以我们想使用它就得写兼容代码让它在FF和IE下都可以达到目的。function getByClassName(className){ if(document.getElementByClassName)
javascript 动态修改css样式方法汇总(四种方法)
11-23
在JavaScript中提供几种方式动态的修改样式，下面将介绍方法的使用、效果、以及缺陷。 1、使用obj.className来修改样式表的类名。 2、使用obj.style.cssTest来修改嵌入式的css。 3、使用obj.className来修改样式表的...
原生JS实现获取及修改CSS样式的方法
10-18
本文将详细讲解如何使用原生JS来获取和修改CSS样式，包括行内样式、内部样式以及外部样式，同时也会涉及浏览器兼容性问题。 一、行内样式获取 行内样式是直接在HTML元素的`style`属性中定义的样式。例如： ```html ...
在jsp修改CSS样式后没反应无效果的解决方法
12-13
问题：在jsp修改CSS样式后看不到效果，clear过了，tomcat重启过了，浏览器缓存清除过了，还是没反应。 解决方法：双击tomcat服务器，选择Modules，点Add Web Module…，在弹出的窗口选择你的项目，在path输入/就好...
document.getElementByclassName（）方法
热门推荐
boat_sea的博客
04-29 23万+
document.getElementByclassName（）方法;使用指定的calss属性值返回相关元素的集合(节点列表)使用getElementByclassName（）方法，使用指定的calss属性值(名称)返回当前文档中所有相关元素的集合(节点列表对象)。节点列表对象代表了收集到的所有相关节点，可以使用序列号(index)访问节点列表，index的值从0开始。注：使用节点列表对象的len...
JS修改css样式style浅谈
12-03
一、局部改变样式 分为改变直接样式，改变className和改变cssText三种。需要注意的是： 注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。 调用方法： 如果改变className，则事先在样式表中申明类，但调用时不要再跟style，像document.getElementById(‘obj’).style.className=”…”的写法是错误的！只能写成：document.getElementById(‘obj’).className=”…” 改变cssText 但是如果用c
标梵互动信息解说关于CSS-in-JS: 使用及优缺点
标梵互动
01-26 563
CSS-in-JS的工具库让我们可以以一种新的方式来写css，支持动态函数、css作用域并且可移植。但是对于开发者来说，这会使得前端开发的复杂性更高，是否值得使用是具有争议的。这篇本章主要是为了让你从更高的层面去了解CSS-in-JS工具库，从原理上来看它们解决了什么问题，以及在项目中该不该使用它们。 什么是CSS-in-JS 前端主流框架React、Vue、Angular都是基于组件开发的，因此组件化开发也是主流的前端开发方式。一个组件通常是像按钮button、弹窗pop-up、导航栏这样的一个UI元素，
关于使用JS动态修改CSS样式问题
yuanmei1986的博客
03-01 5192
【转】关于使用js动态修改样式问题  有时我们需要动态生成效果，那么就需要对页面的css进行各种处理，进而达到一些样式的改变。如动画，拖放等效果。所以使用JS正确的来对页面样式修改是灰常重要的。 1.修改标签的class属性值 直接在css中定义多种css类型  然后在事件中对DOM对象的 class属性进行切换，是最简单可行的一种方式。也
JS中使用正则表达式提取数字
jiuyehengxia的博客
12-16 5061
使用replace(/[^0-9]/ig,"")将所有字符转换为空， 剩余只含数字的字符串， 然后再转换成数值类型就可以了，如下： let str = "jslfj560jasldf"; let newStr = +(str.replace(/[^0-9]/ig,"")); console.log(newStr); //560 console.lo...
箭头函数箭头后面使用(), 还是({}), 还是什么括号都不适用
jiuyehengxia的博客
12-27 3234
一. 使用()的情况: list.map(item=>(<WriterContentWrap>内容</WriterContentWrap>) 等同于: list.map(item=>{return(<WriterContentWrap>内容</WriterContentWrap>)}) 箭头后面跟的是JSX表达式时...
indexOf和findIndex在数组和字符串中的使用对比
jiuyehengxia的博客
01-19 943
一. indexOf: 1, 数组和字符串都有该方法; 2, 语法: arr.indexOf( item, startPos ); 使用严格相等, startPos为查找起始位置; 3, 返回值: 找到时, 返回第一个item索引; 若无, 返回 -1; 二. findIndex: 1, 仅数组有该方法, 字符串没有; 2, 语法: arr.findIn...
apply, bind和call三者共同点和区别
jiuyehengxia的博客
01-02 296
共同点: 三者均是用来修改函数中this对象的指向, 都可以传递参数, 第一个参数为this指向的对象; 不同点: 1, apply()和call()均是修改this指向对象后直接调用函数, 而bind()方法返回函数仍需再次调用(bind(obj)( )); 2, 传参不同, apply()方法传参为数组, bind()和call()直接传参即可; ...
数组中splice, slice, delete和concat方法的比较
jiuyehengxia的博客
01-09 218
splice(): 1, 返回值: 返回被修改内容的数组; 2, 是否修改原数组: 是; 3, 参数: splice(start, deleteCount, addItem1, addItem2, ...); 4, 参数说明: start, 起始位置; deleteCount, 删除的数量(缺省时, start位置之后全部截取); ...
循环中break, continue和return的使用对比
jiuyehengxia的博客
01-19 176
一. break: 终止指定label的循环; 无指定label时终止当前循环; 二. continue: 跳过指定label循环中的一步,执行下一步; 无指定label时终止当前循环中的一步, 执行下一步; 三. return: 在函数中使用, 终止函数的执行; ...
使用JavaScript动态地创建和修改CSS样式，这个方法能给我举个例子嘛
最新发布
06-03
当您使用JavaScript动态地创建和修改CSS样式时，您可以使用以下方法之一： 1. 通过修改元素的style属性来修改CSS样式。例如，以下代码将更改id为 "myElement"的元素的背景颜色： ``` document.getElementById(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值