原生JS中 cssText的用法，可以给样式加!important权重

最新推荐文章于 2025-06-09 22:36:45 发布
原创 最新推荐文章于 2025-06-09 22:36:45 发布 · 6.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文讲解了如何在不覆盖原有CSS样式的情况下，使用JavaScript动态修改元素的字体大小。通过对比`style.cssText`与直接修改样式属性的方法，阐述了兼容性和最佳实践。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

就像在html中写style=“”一样一次写一堆，但是给cssText设置后原先的css样式被清掉了，只有最新设置的值;

document.getElementById("id").style.cssText = "font-size:100px!important;width:100px;"

如果要不影响原先设置的css,可以这样写

document.getElementById("id").style.fontSize= "100px"; // 不能加任何!important 

兼容性：

chrome , firefox , IE8  IE8+都兼容！

关于CSS 中权重的教程
weixin_73032215的博客
03-02 983
通过以上介绍，相信您已经对 CSS 中的权重概念有了更深入的理解。合理利用权重值可以确保样式正确应用，并避免样式冲突导致的问题。在编写 CSS 样式时，谨记权重计算规则，使得您的样式表更加清晰、可维护。希望本教程能帮助您更好地掌握 CSS 中权重的使用。
怎么修改html行内样式表,原生JS获取及设置CSS样式-1.行内样式
weixin_42190030的博客
06-03 1403
面试中，应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧，让我给大家总结一下~HTML中样式的写法不外乎以下四种方式行内样式假装有内容head内部样式div {width: 100px;line-height: 100px;background-color: red;border: 6px solid #ccc;text-align: center;}外链样式导入样式@impo...
JavaScript 学习笔记——cssText
02-26 1426
平常编写代码，更改一个元素样式的时候，自己都是用 obj.style.width = "200px"; obj.style.position = "absolute"; obj.style.left = "100px"; 之类的代码进行设置，这样的话如果更改样式很多的时候，就要写很多代码，难道不能像Jquery那样使用$(obj).css(……);这...
CSS 选择器权重计算规则及 !important 的最佳实践
最新发布
前端大白话
06-09 630
前端打工人的深夜崩溃瞬间：明明写了`.box p { color: red }`，结果页面里的文字还是蓝色；好不容易用`!important`强制生效，结果下周改需求时被另一个`!important`反杀……今天咱们就聊聊CSS的"隐藏规则"——选择器权重，用最接地气的话讲清计算规则和`!important`的正确用法，看完这篇，你不仅能让样式"听话"，还能和面试官唠明白背后的逻辑～
js的 cssText
慢才后生
11-14 1933
转载自：https://www.cnblogs.com/majingyi/p/6840818.html 很多人用过 style.color、style.display 等直接设置元素的样式属性，但是 style.cssText 用过的人就不多了。 cssText 本质是什么？ cssText 的本质就是设置 HTML 元素的 sty...
js中用cssText设置css样式 (
王德成的专栏
09-19 472
如果网页中一个 id为“no”的标签，暂且当div标签来tell； 想要在js中设置这个div的css样式，很一般的做法是： var obj = document.getElementByIdx_x_x('no'); obj.style.width = '400px'; obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢，太麻烦了把、 一般情况下
原生js追加Html 或者text
Timor2016的博客
11-21 1624
方法：insertAdjacentHTML(postion,html); 　　　insertAdjacentTEXT(postion,text); 参数： position是相对于element元素的位置，并且只能是以下的字符串之一： 1. beforeBegin: 插入到标签开始前 2. afterBegin:插入到标签开始标记之后 3. beforeEnd:插入到标...
js给页面加style无效果的解决方法
10-26
总结来说，解决JavaScript给页面加style无效果的问题，需要从确保DOM元素加载完成、解决样式冲突、选择合适的执行时机、检查JavaScript代码错误以及灵活使用cssText等方法入手。通过这些步骤，可以有效地确保...
Web前端面试题整合，持续更新【可以收藏】
jason的java世界
12-12 1717
css相关、JS相关、浏览器网络相关、vue相关、react相关、移动端相关、插件及工具相关、前端性能优化、原生通信、算法相关、node相关、计算机基础
HTML行内样式怎么添加
05-07
然后，可能需要提到动态修改行内样式的方法，比如使用JavaScript或jQuery。引用[1]中的例子展示了通过JavaScript获取元素并修改style属性，用户可能需要这方面的信息。同时，引用[5]提到了Vue中的动态样式绑定，虽然...
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
JS cssText（二十一）
qq_42502919的博客
03-21 588
cssText本质是什么： 本质就是设置HTML元素的style属性值。 使用格式： document.getElementById("d1").style.cssText = 'color:red;font-size:13px' cssText返回值： 在一般的浏览器中，它返回你赋给它的值，但是在IE中，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号： document.getElement("d1").style.cssText = "color:red,font-size:13px
JS初级cssText
jiajia199470的博客
10-20 360
HTML> http-equiv="Content-Type" content="text/html; charset=utf-8"> 无标题文档 div { width:100px; height:100px; border:1px solid #333; } id="div1">123 id="btn1" type="button" value="按钮" /> var
JS基础——cssText的用法
波克比的前端优快云博客
10-30 786
JS基础——cssText的用法 #div1{ width:100px; height:100px; background:#f3f3f3; border:1px solid #ccc; color:red;} window.onload = function(){ var oDiv = document.getElementById('div1'); var oBtn = docume
JavaScript 学习笔记——cssText，致前端高级工程师的一封信
m0_60567796的博客
03-28 621
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】核心总结学习笔记+真实项目实战+最新讲解视频】]( )**[外链图片转存中…(img-DITKavc9-1711641368517)]
通过js 快捷给元素设置多个css属性 -- cssText
Dark_programmer的博客
12-14 3480
cssText js操作dom元素是很常见的操作。 有这么一个场景，对新创建的dom元素通过js设置多组css属性。 基操： let element = document.createElement("div"); document.body.appendChild(heart).innerHTML = '我是新建元素的文案'; element.style.height = '100px'; // 设置元素高度 element.style['text-align'] = '100px'; // 设置元素行
cssText的使用（原生js添加css样式）
神zhi殇的博客
10-16 661
参考： https://www.cnblogs.com/majingyi/p/6840818.html https://www.cnblogs.com/sky903700252/p/7382808.html var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px...
JS笔记 （三）csstext、获取对象、自定义标签属性
DragonLoveYQ的博客
11-09 427
一、cssText用于同时修改多条属性 <style> #box{ width:100px; height:100px; background-color: lightpink; } </style> <div id='box'></div> 通常的指定什么修改什么 var box = document.getElementById('box'); box.onclick = function (){ box.style.width
JavaScript中的style.cssText使用教程
beichen3997的博客
05-22 1万+
1. cssText 本质是什么？cssText 的本质就是设置 HTML 元素的 style 属性值。代码如下:document.getElementById("d1").style.cssText = "color:red; font-size:13px;";2. cssText 返回值是什么？在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值