首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在元素不存在的情况下添加样式属性,或者使用Javascript将给定的样式添加到预先存在的样式属性?

在元素不存在的情况下添加样式属性可以通过以下方式实现:

  1. 使用JavaScript的classList属性和add()方法,可以动态地添加CSS类。可以创建一个新的样式类,然后将其添加到元素的classList中。例如:
代码语言:txt
复制
var element = document.getElementById('myElement');
if (element) {
    element.classList.add('newStyle');
}
  1. 通过创建内联样式。可以使用JavaScript的style属性来直接为元素设置内联样式。如果元素不存在,可以先创建一个虚拟元素,设置样式属性,然后将其应用到需要的元素上。例如:
代码语言:txt
复制
var virtualElement = document.createElement('div');
virtualElement.style.color = 'red';
virtualElement.style.fontWeight = 'bold';

var existingElement = document.getElementById('existingElement');
if (existingElement) {
    existingElement.style.color = virtualElement.style.color;
    existingElement.style.fontWeight = virtualElement.style.fontWeight;
}

通过以上两种方式,可以在元素不存在的情况下添加样式属性。对于预先存在的样式属性,可以直接使用JavaScript的classList和style属性来修改或添加新的样式属性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript 高级程序设计(第 4 版)- DOM

而非"className" 如果给定的属性不存在, 则 getAttribute() 返回 null 能取得不是 HTML 语言正式属性的自定义属性的值 属性名不区分大小写,因此"ID"和"id"被认为是同一个属性...DOM将文档片段定义为“轻量级”文档,能够包含和操作节点,却没有完整文档那样额外的消耗。不能直接把文档片段添加到文档。相反,文档片段的作用是充当其他要被添加到文档的节点的仓库。...# 动态样式 元素用于包含 CSS 外部文件, 而元素用于添加嵌入样式。动态样式也是页面初始加载时并不存在,而是在之后才添加到页面中的。...对子节点重新排序(尽管调用一个方法即可实现)会报告两次变化事件,因为从技术上会涉及先移除和再添加 观察子树 默认情况下, MutationObserver将观察的范围限定为一个元素及其子节点的变化。...因为 CSS 属性名使用连字符表示法(用连字符分隔两个单词 , 如 background-image),所以在JavaScript 中这些属性必须转换为驼峰大小写形式(如backgroundImage)

1.2K30

26 个 CSS 面试的高频考点助力金三银四

问题 7:伪元素是什么意思? 伪元素是添加到选择器的关键字,它允许一种样式,即所选元素的特定部分。CSS用于在HTML标记中应用样式,它允许在不影响实际文档的情况下对文档进行额外标记。...CSS 中有四类可以授权选择器的特异性级别: 内联样式 ID 类,属性和伪类 元素和伪元素 问题12:CSS有什么缺点 CSS的缺点有: 版本太多 – 与HTML或Javascript等其他参数相比,...问题 17:我们如何在网页上添加图标? 我们可以使用诸如font-awesome或者阿里的 iconfont 之类的图标库将图标添加到HTML网页。...我们必须将给定图标类的名称添加到任何内联HTML元素中。 (或)。 图标库中的图标是可缩放的矢量,可以使用CSS进行自定义。 问题 18:哪个属性指定边框的宽度?...在复杂情况下,可以使用选择器和分组方法来应用样式。 无需额外下载。 嵌入式样式表的缺点: 无法控制多个文档。 问题 23:列出使用的各种媒体类型。 不同的介质不区分大小写,因此它们具有不同的属性。

2K20
  • 30道CSS 面试知识点总结

    问题 7:伪元素是什么意思? 伪元素是添加到选择器的关键字,它允许一种样式,即所选元素的特定部分。CSS用于在HTML标记中应用样式,它允许在不影响实际文档的情况下对文档进行额外标记。...问题 17:我们如何在网页上添加图标? 我们可以使用诸如font-awesome或者阿里的 iconfont 之类的图标库将图标添加到HTML网页。...我们必须将给定图标类的名称添加到任何内联HTML元素中。 (或)。 图标库中的图标是可缩放的矢量,可以使用CSS进行自定义。 问题 18:哪个属性指定边框的宽度?...在复杂情况下,可以使用选择器和分组方法来应用样式。 无需额外下载。 嵌入式样式表的缺点: 无法控制多个文档。 问题 23:列出使用的各种媒体类型。 不同的介质不区分大小写,因此它们具有不同的属性。...可维护性、健壮性: (1)将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性。 (2)样式与内容分离:将css代码定义到外部css中。

    1.4K20

    【Web APIs】JavaScript 操作元素 ⑤ ( 修改元素样式属性 | 行内样式操作 - element.style | 类名样式操作 | 类列表样式操作 )

    之间进行类型切换 ; 一、修改元素样式属性 标签元素的 style 样式 / css 样式 也是 元素属性的一种 , 通过 JavaScript 的 DOM 操作 , 也可以修改 元素的 样式属性 ;...当使用 JavaScript 的 DOM 操作 修改 HTML 标签元素的样式时 , 有两种主要的方法 : 行内样式操作 element.style 类名样式操作 element.className..., 权重优先级较高 , 并且可以直接指定样式属性的值 ; 行内样式操作语法格式 : 下面的代码使用时 , 将 property 替换为要修改的属性 ; // 修改元素的样式属性 element.style.property...; toggle(String [, Boolean]) : 切换 元素的类名 , 如果类名存在则移除该类名 , 如果类名不存在则添加该类名 ; 可选的布尔值参数 可以用来 强制指定 添加或移除类名...函数 Element.classList#toggle 函数 用于 在 HTML 标签元素 的 类名列表 中切换一个给定的类名 , 如果类名存在 , 则移除该类名 ; 如果类名不存在,则添加它。

    17810

    Web专题分享

    一对标签( tags)可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。...属性和值被冒号分开。 ---- 如果直接使用行内样式的方式,可以不使用选择器,而是直接在元素本身上添加 style 即可。 行内样式 这段字是红色的!... 我们可以使用 .c1 {} 来对两个元素同时这是样式 属性选择器 这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式: a[title] { } 或者根据一个有特定值的标签属性是否存在来选择...许多 HTML 开发者都不是程序员,但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。...浏览器开发者控制台将返回一个错误:TypeError: para is undefined。这意味着 para 对象还不存在,所以我们不能为它增添一个事件监听器。

    2.6K20

    画了20张图,详解浏览器渲染引擎工作原理

    了解过数据结构的小伙伴对于树结构应该不陌生,「树是由结点或顶点和边组成的且不存在着任何环的一种数据结构」。一棵非空的树包括一个根结点,还有多个附加结点,所有结点构成一个多级分层结构。...下面通过一张图来看看什么是树结构: 对于上面的三个结构,前两个都是树,他们都只有唯一的根节点,而且不存在环结构。而第三个存在环,所以就不是一个树结构。 说完树结构,就回归正题,来看看什么是DOM树。...以下操作都会导致页面重排: 页面首次渲染; 浏览器窗口大小发生变化; 元素的内容发生变化; 元素的尺寸或者位置发生变化; 元素的字体大小发生变化; 激活CSS伪类; 查询某些属性或者调用某些方法; 添加或者删除可见的...使用absolute或者fixed,使元素脱离文档流,这样他们发生变化就不会影响其他元素 避免频繁操作DOM,可以创建一个文档片段documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中...如果脚本文件中没有操作DOM的相关代码,就可以将JavaScript脚本设置为异步加载,可以给script标签添加 async 或 defer 属性来实现脚本的异步加载。

    2.6K21

    CSS技术入门

    CSS 指层叠样式表 ( Cascading Style Sheets )样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在...效果:图片伪元素CSS 伪元素是用来添加一些选择器的特殊效果。CSS 伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。...:before是伪元素,并且它生成包含放置在元素中的内容之前的生成内容的伪元素。使用content 属性来指定要插入的内容。默认情况下,生成的伪元素是内联的,但这可以使用属性显示更改。...过渡CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。...如此,既然不存在自定义的CSS 类,就根本不会存在 CSS 类污染了全局作用域的问题。

    2.9K61

    第75天:jQuery中DOM操作

    一、基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML。 就是相当于javascript里头的innerHTML。...2.text() 使用text()方法读取或者设置元素的innerText。 就是相当于javascript里头的innerText。...3.attr() 使用attr()方法读取或者设置元素的属性,对于jQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。...$(html字符串) 使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象。 然后调用可以append等方法将新创建的节点添加到Dom中。...myclass是css的选择器名 3.移除样式 移除样式removeClass("myclass"), 4.切换样式 切换样式(如果存在样式则去掉样式,如果没有样式则添加样式) toggleClass

    84820

    HTML(一)

    布尔属性 布尔属性只需要将属性名称添加到元素 opening tag 中即可: 也可以为布尔属性指定一个空字符串(“”)或属性名称字符串作为其值也有同样的效果:...自定义属性通常与 CSS 和 JavaScript 结合使用。 局部属性 局部属性通常和每个元素对应,每个局部属性都可以用来控制元素都有都有行为的某个方面。在介绍每个元素时再做介绍。...全局属性 全局属性用来配置所有元素的共有的行为,可以用在任何一个元素身上。 class 属性 class 属性用来将元素归类,方便找出文档中某一类元素或为某一类元素应用 CSS 样式。...hidden id 属性 用来给元素分配一个唯一的标识符,标识符通常被用于应用样式或者 JavaScript 逻辑到该元素。...default-style: 指定页面优先使用的样式表,content属性的值必须是同一文档中某个style元素或link元素的title属性值。

    45350

    angularJS的DOM操作

    angular.element:将DOM元素或者HTML字符串一包装成一个jQuery元素。...find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代 hasClass()-确定任何一个匹配元素是否有被分配给定的(样式)类 html()-获取集合中第一个匹配元素的...()-获取匹配的元素集中第一个元素的属性(property)值 ready()-当DOM准备就绪时,指定一个函数来执行 remove()-将匹配元素集合从DOM中删除。..., 取决于这个样式类是否存在或值切换属性。...即:如果存在(不存在)就删除(添加)一个类 triggerHandler() -为一个事件执行附加到元素的所有处理程序 unbind() - 从元素上删除一个以前附加事件处理程序 val()-获取匹配的元素集合中第一个元素的当前值

    9410

    《精通CSS》第2章 添加样式

    类选择器 .classname 这种选择器会选择所有 class 属性中包含给定值的元素。如.intro会选中所有 class 中包含intro(必须是空格分隔完整的intro)的元素。...通常情况下,浏览器会按照元素在页面中出现的先后次序来给他们应用样式。...如果存在向前同辈选择器,那么再给 h2 前面的段落应用样式时,h2 自身还不存在,这时浏览器就得先记住这一选择器,然后对文档进行多轮处理才能彻底应用样式。...匹配元素存在某些属性,通过方括号包裹住属性即可,如abbr[title]会匹配存在title属性的abbr元素。...伪元素会创建一个抽象的伪元素,这个元素不是 DOM 中的真实元素,但是会存在于最终的渲染树中(并不是全都会存在于树中,后面会提到),我们可以为其添加样式。

    1.6K40

    jQuery基础

    开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)...六、操作标签 样式操作 样式类 addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。...hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。...$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B 添加到指定元素内部的前面 $(A).prepend(B)// 把B前置到A $(A).prependTo...(B)// 把A前置到B 添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 添加到指定元素外部的前面 $(A).before

    2K120

    JavaWeb02-CSS,JS(Java真正的全栈开发)

    把样式添加到HTML中,可以将网页内容与显示相分离。(可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的现实效果功能。)...优先级问题 最近原则:不同的导入方式中,如果有属性一样的样式,那个方式里此html元素近就用那种方式定义的样式. 4.CSS选择器 css选择器主要是用于选择需要添加样式的html元素。...5.CSS属性 字体 Css字体属性定义文本的字体系列,大小,加粗,风格(如斜体)和变形(如小型大写字母) 常用属性: font:简写属性,作用是把所有针对字体的属性设置在一个声明中。...常用属性: width:设置元素的宽度 height:设置元素的高度 列表 CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。 常用属性: list-style:简写属性。...面对对象中可能使用,在JS框架有涉及,一般情况下不使用。

    2.6K150

    JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)

    和attr的区别,如果操作的是元素的固有属性(非自定义的),建议使用prop;若是自定义属性,建议用attr。...1)addClass():添加class属性值; 2)removeClass():删除class属性值; 3)toggleClass():切换class属性,如toggleClass("one"),若元素对象上存在...3 CRUD操作 1)append():父元素将子元素追加到末尾,如A.append(B),将对象B添加到A的内部,且在末尾; 2)prepend():父元素将子元素追加到开头,如A.append(B)...,将对象B添加到A的内部,且在开头; 3)appendTo():如A.append(B),将对象A添加到B的内部,且在末尾; 4)prependTo():如A.append(B),将对象A添加到B的内部...,且在开头; 5)after():添加元素到元素后边,如A.after(B),将对象B添加到A的后面,对象A和B是平级的; 6)before():添加元素到元素前边,如A.before(B),将对象B添加到

    3.1K50

    浏览器层面优化前端性能(2):Reader引擎线程与模块分析优化点

    CSS渲染与布局优化添加或移除一个DOM元素、修改元素属性和样式类、应用动画效果等操作,都会引起DOM结构的改变,从而导致浏览器要repaint或者reflow。...降低样式选择器的复杂度尽量保持class的简短,或者使用Web Components框架(如:Omi)。...减少css嵌套,如sass使用@at-root减少需要执行样式计算的元素的个数对于样式计算来说,范围越小、规则越简单的话,处理效率越高。...避免强制同步布局事件的发生将一帧画面渲染到屏幕上的处理顺序如下所示: 在JavaScript脚本运行的时候,它能获取到的元素样式属性值都是上一帧画面的,都是旧的值。...大多数情况下,都不需要先修改然后再读取元素的样式属性值,使用上一帧的值就足够了。过早地同步执行样式计算和布局是潜在的页面性能的瓶颈之一避免快速连续的布局比强制同步布局更糟:连续快速的多次执行它。

    1.2K20

    JavaScript 编程精解 中文第三版 十四、文档对象模型

    浏览器构建文档结构的模型,并使用该模型在屏幕上绘制页面。 JavaScript 在其沙箱中提供了将文本转换成文档对象模型的功能。它是你可以读取或者修改的数据结构。...相反,你首先需要创建节点,然后使用副作用,将子节点和属性逐个添加到节点中。大量使用 DOM 的代码通常较长、重复和丑陋。 但这些问题并非无法改善。...默认情况下,该属性值为static,表示元素处于文档中的默认位置。若该属性设置为relative,该元素在文档中依然占据空间,但此时其top和left样式属性则是相对于常规位置的偏移。...如果我们没有为样式中的数字加上单位,浏览器最后会忽略掉该样式,除非数字是 0,在这种情况下使用什么单位,其结果都是一样的。...将所得表格添加到id属性为"mountains"的元素,以便它在文档中可见。 当你完成后,将元素的style.textAlign属性设置为right,将包含数值的单元格右对齐。

    1.4K20

    Web Components-LitElement 实践

    并且会自动添加同名 DOM 属性作为 property 的初始值; property 是 DOM 中的属性,是 JavaScript 里的对象,有同名 attribiute 标签属性的 property...type:在将 String 类型的 attribute 转换为 property 时,Lit 的默认属性转换器会将 String 类型解析为给定的类型。...添加到组件的样式会自动作用于 shadow root,并且只会影响组件 shadow root 中的元素。 Shadow DOM 为样式提供了强大的封装。...适用于执行必须在第一次更新之前完成的一次性初始化任务。 connectedCallback():在将组件添加到文档的 DOM 时调用。适用于仅在元素连接到文档时才发生的任务。...其中最常见的是将事件侦听器添加到元素节点。 disconnectedCallback():当组件从文档的 DOM 中移除时调用,用于移除对元素的引用。比如移除添加到元素节点的事件侦听器。

    3.5K40

    59道CSS面试题(附答案)

    行内式是指将样式写在元素的 style属性内。 内嵌式是指将样式写在 style元素内。 外链式是指通过link标签,引入CSS文件内的样式。...(4)改变样式 link的标签是DOM元素,支持使用 JavaScript控制DOM和修改样式;@ import是种方法,不支持控制DOM和修改样式。 3、浮动元素引起的问题和解决方法是什么?...虽然浮动元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。 因为浮动元素不在文档流中,所以文档流中的块元素表现得就像浮动元素不存在一样,下面的元素会填补原来的位置。...也可以把浮动元素想象成被块元素忽略的元素,而内联元素会关注的元素。 17、解释一下 CSS Sprite,以及如何在页面或网站中使用它。...display:none隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当它从来都不存在。 visibility:hidden隐藏对应的元素,但是在文档布局中仍保留原来的空间。

    5K50

    50个有价值的CSS编写规则,让你写出更好的CSS

    我将所有全局样式保存在一个单独的文件中(尤其是在使用预处理器时),但你也可以将其放在 CSS 文件的顶部,然后专注于为站点的特定组件、元素或部分设置特定样式。...12、使用速记 有时你想指定 padding-top 或 border-right ,但根据经验,我经常回到这些来添加更多,所以,我习惯于总是使用速记,以便在不指定很多属性的情况下更容易更改,代码更少。...33 、 遵循 CSS 方法论 CSS 方法将确保你的样式的一致性和未来证明。有几个选项可以尝试,或者你甚至可以采用多个选项。...48 、 在你寻求 Javascript 帮助之前先找到 CSS 解决方案 我一直在分享如何在我的 Youtube UI/UX 库中尽可能多地使用 CSS 构建通用组件,我想让你明白的是,在你尝试添加...50 、 使用后处理器 真正考虑将 PostCSS 添加到你的项目中,以便你可以利用各种插件来优化你的 CSS,例如 Autoprefixer(添加 webkit-、moz-、ms- 等)、CSSNano

    2.4K20
    领券