js添加css样式—js 添加css 收藏 0

JavaScript DOM修改(文本和样式)

DOM节点获取

操作属性：

document.getElementById(id).attribute=new value

实例

本例改变了 <img> 元素的 src 属性：

操作内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性和innerText（IE支持） outerText outerHTML

区别描述如下：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

document.getElementById(id).innerHTML=new HTML

实例一

本例改变了 <p> 元素的内容：

实例二：

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

　　1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内外的文本(多个标签)。

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，

　　如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，

　　下面是一个简单的符合W3C标准的示例：

操作样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

CSS样式的个别属性采用驮峰式写法(如：backgroundColor), 且不带横线。

document.body.style.backgroundColor=\”red\”;

如：

注意：追加CSS类,注意要留有空格;

ul标记已经设定了.myUL1类的样式的情况下,oMy.className = \”myUL1 myUL2\”不等同于oMy.className += \” myUL2\”,

oMy.className = \”myUL1 myUL2\”表现形式与oMy.className = \”myUL2\”一样; 因此应当采用oMy.className += \” myUl2\”;

改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

注意:经过测试证明,para.appendChild(node);调换至最后一行,运行正常

最可行的方法:添加节点的顺序,由内到外(个人习惯);

Facebook 开源 StyleX —— 在 JavaScript 中写 CSS

Meta（原 Facebook）了全新的 CSS-in-JS 库 StyleX。

GitHub 地址：https://github.com/facebook/stylex

官方介绍道，StyleX 是一个富有表现力、具有确定性、可靠且可扩展的样式系统。它通过使用编译时 (compile-time) 工具融合了静态 CSS 的性能和可扩展性。

此外，StyleX 不仅仅是一个基于编译器的 CSS-in-JS 库，它经过精心设计，可以满足大型应用程序、可复用组件库和静态类型代码库的要求。Meta 旗下多款产品如 Facebook、WhatsApp、Instagram、Workplace、Threads 等都在使用 StyleX 作为其 CSS 样式解决方案。

StyleX 主要特性

• 快速：StyleX 在编译时和运行时都具备高效的性能。Babel 转换不会对构建过程产生显著影响。在运行时，StyleX 避免了使用 JavaScript 插入样式的开销，并仅在必要时高效地组合类名字符串。生成的 CSS 经过优化，确保即使是大型网站的样式也能被浏览器快速解析。

• 可扩展：StyleX 旨在适应像 Meta 这样的超大型代码库。通过原子构建和文件级缓存，Babel 插件能够处理数万个组件在编译时的样式处理。由于 StyleX 设计为封装样式，它允许在隔离环境中开发新组件，并期望一旦在其他组件中使用时能够可预测地呈现。

• 可预测性：StyleX 会自动管理 CSS 选择器的特异性，以确保生成的规则之间不会发生冲突。它为开发人员提供了一个可靠地应用样式的系统，并确保 “最后应用的样式始终生效”。

• 类型安全：使用 TypeScript 或 Flow 类型来约束组件接受的样式，每个样式属性和变量都具有完全的类型定义。这有助于提高代码的可读性和可维护性，同时减少潜在的错误和冲突。

• 样式去重：StyleX 鼓励在同一文件中编写样式和组件。这种方法有助于使样式在长期内更具可读性和可维护性。StyleX 能够利用静态分析和构建时工具来跨组件去重样式，并删除未使用的样式。

• 可测试性：StyleX 可以配置为输出调试类名，而不是功能性的原子类名。这可以用于生成快照，以便在对设计进行轻微更改时不会经常变化。通过这种方式，开发人员可以更轻松地测试和验证样式的正确性，从而提高开发效率和产品质量。

示例代码

下面是一个按钮组件的示例代码

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com