程序员经验分享-hwhale

使用 vanilla JS 添加 CSS 规则的最短方法

2023-12-20

我正在开发一个库，试图将其保持在 1KB 以下。我已经非常接近我的极限了。我需要添加一个 CSS 规则来控制显示隐藏行为。

[hidden]{ display:none !important }

HTML 页面没有任何样式标签。这将是我唯一需要的规则。我只能用纯JS添加。我do not想要使用 el.style.display = 'none' 更改元素的样式。我想用一个属性来做到这一点。

那么我该如何添加它，我找到了创建样式元素并设置其innerHTML并将其附加到head元素的解决方案。我希望我能得到一个答案/一个黑客，也许可以用更少的字符来做到这一点。


这是我最短的了，如果可以的话请再短一点。

const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML = s;

// Usage:
addCSS("[hidden]{ display:none !important }");
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

使用 vanilla JS 添加 CSS 规则的最短方法 的相关文章

  • 如何将本地文本文件上传到文本区域（网页内）

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一

  • CSS如何制作可滚动列表

    我正在尝试创建一个由标题和标题下方的项目列表组成的网页 我希望项目列表可以垂直滚动 我还希望网页占据整个窗口 但不要更大 目前我的问题是项目列表不可滚动 而是延伸到窗口底部下方很远 这导致窗口可滚动 应该做什么CSS属性位于html bod

  • 未捕获的异常：数据表编辑器 - 不允许远程托管代码

    我正在尝试使用 Datatables 使用 datatableseditor 来实现 CRUD 操作 但是我收到错误消息 1 未捕获的异常 数据表编辑器 不允许远程托管代码 请参见http editor datatables net有关如何

  • 使用 Javascript/Node.js 在代码内执行 mongoimport

    node js javascript 中是否有任何库可供个人使用mongoimport在代码中 据我了解 mongoimport 有点像 exe 您必须先执行它 然后才能使用其文本输入环境 是否可以在我的代码中执行 mongoimport

  • 如何绕过Access-Control-Allow-Origin？

    我正在一个平台上对我自己的服务器进行ajax调用 他们设置了阻止这些ajax调用的平台 但我需要它从我的服务器获取数据以显示从我的服务器数据库检索到的数据 我的 ajax 脚本正在运行 它可以将数据发送到我的服务器的 php 脚本以允许其处

  • Angular 2 将字符串转换为 md5 哈希

    我找到了ts md5 https www npmjs com package ts md5包 但在示例中它有一个hashStr方法 但现在不行了 类型上不存在属性 hashStr Md5 使用该错误后 该错误会记录在我的控制台中 我怎样才能

  • 如何在打字稿中使用外部js

    我通过 Typescript 代码生成 Angular JS 代码 在一种情况下 我需要将外部 JS 文件添加到我的打字稿文件中 并且需要访问 js 文件中的类 我像这样添加js文件

  • Sphinx内联代码高亮

    我使用 Sphinx 制作一个包含代码示例的网站 我成功地使用了 code block获取语 法高亮的指令 但我无法使用此代码获得内联语法突出显示 role bash code language bash Test inline bash

  • 检查浏览器空闲的替代方法

    我有一个简单的网络信息亭 在鼠标未使用 jQuery 移动 30 秒后显示用户操作提示 var i null body wrap mousemove function clearTimeout i overlay fadeOut i set

  • 如何使用 Javascript 在 html 文件中搜索字符串？

    我有 5 个 html 文件 并且有一个搜索表单 我想用它来搜索这些 html 文件中的文本

  • 此版本的 CLI 仅与 Angular 版本 5.0.0 或更高版本兼容错误

    我已经有 Angular 项目在 4 版本中运行 在安装新项目时 不幸的是我安装了 6 版本的 Angular cli 在以 4 版本运行的旧项目中运行 ngserve 命令时 这会引发错误 您的全局 Angular CLI 版本大于本地版

  • 从请求url获取hash参数

    我有这样的网址 http www coolsite com daily plan id 1 http www coolsite com daily plan id 1解析该字符串并读取哈希值 id 之后的值 的最简单方法是什么 谢谢 在客户

  • 删除下拉链接并在导航栏菜单中显示其所有项目

    我正在使用 Twitter Bootstrap 及其响应式设计来实现顶部典型的 Twitter Bootstrap 导航栏菜单 在那里我有一些链接和一个下拉菜单 当我将浏览器大小调整为768px或者更少 它会转变为一种新的导航菜单 这一切开

  • 什么时候可以使用Javascript，什么时候不可以？

    不使用太多 javascript jquery 是个好习惯吗 我们应该尽可能避免它 为了良好的可访问性 吗 什么时候可以使用 JavaScript 什么时候不能在网页设计和开发中使用 JavaScript 在什么场景 什么条件下 Updat

  • 根据文本内容从 jquery 对象中过滤元素

    我正在尝试使用contains带有 this 关键字 但它给出了错误 JS function var check ul find li filter function return this contains two css color r

  • 如何将数据推送到嵌套对象

    如何将另一个元素推入variables来自以下对象的属性 var request name Name id 3 rules name Rule name tags tagId 1 variables variable var1 matchT

  • 在 Meteor 应用程序中实现 MongoDB 2.4 的全文搜索

    我正在考虑向 Meteor 应用程序添加全文搜索 我知道 MongoDB 现在支持此功能 但我对实现有一些疑问 启用文本搜索功能的最佳方法是什么 textSearchEnabled true 在 Meteor 应用程序中 有没有办法添加索引

  • ‘state’未定义 no-undef

    我使用教程来学习 React 但我很快就陷入困境 在教程中 他们使用以下代码 import React Component from react class Counter extends Component state count 0 r

  • 深层嵌套 Flexbox 布局是否会导致性能问题？

    我一直在开发一个 ReactJS 项目 其中我使用 Flexbox 布局创建了大部分组件 由于使用 React 我们可以拥有深度嵌套的组件 因此我的布局具有嵌套的 Flexbox 布局 现在我的问题是 这对性能有任何问题吗 在一个页面上 有

  • 如何从 Cloud Functions for Firebase 文件夹读取证书文件

    我正在尝试读取 certs 文件夹下的文件 如下所示 functions certs idp public cert perm 这是我用来读取文件的代码 fs readFileSync path join dirname certs idp

随机推荐

  • 处理 J2ME 中的可选 API

    是什么right在 Java Mobile 中使用可选 API 的方式 是否需要制作不同版本的应用程序 或者使用以下命令在运行时检查 API 可用性是否足够System getProperty 假设我希望我的应用程序支持 JSR 256 传

  • Minikube服务访问本地VPN

    如何让我的 pod 或 minikube 能够查看我的笔记本电脑通过 VPN 连接到的 10 x 网络 设置 迷你库贝 PHP 容器 php 代码访问私有存储库 10 x 地址 东西可以在本地找到 但我无法在 Pod 中访问同一个 10 x

  • c# 在 FTP 服务器内上传 byte[]

    我需要在 FTP 服务器内上传一些数据 按照 stackoverflow 的帖子 了解如何在其中上传文件和 FTP 一切正常 现在我正在努力改进我的上传 我想收集数据并上传它们而不创建本地文件 而不是收集数据 将它们写入文件 然后在 FTP

  • Scala 宏：检查某个注释

    感谢以下问题的解答我之前的问题 https stackoverflow com q 17223213 397695 我能够创建一个函数宏 使其返回一个Map将每个字段名称映射到其类的值 例如 trait Model case class U

  • C++ 中不可预测的无限 for 循环[重复]

    这个问题在这里已经有答案了 我正在编写一个程序来返回该字符的第一次出现以及该字符在字符串中的频率 函数中的 for 循环执行无限次 而 if 条件和块甚至没有执行一次 问题是什么 string size type find ch strin

  • 如何将字符串写入 Scala Process？

    我启动并运行了一个 Scala 进程 val dir path to working dir val stockfish Process Seq wine dir stockfish 8 x32 exe val logger Process

  • isOrientationSupported 在 IOS 中已弃用

    我收到此错误 但我不知道如何修复它 WARNING

  • 查询嵌套数据的有效方法

    我需要从表中选择许多 主 行 同时还为每个结果返回另一个表中的许多详细行 在没有多个查询的情况下实现这一目标的好方法是什么 一个用于主行 一个用于每个结果以获取详细行 例如 数据库结构如下 MasterTable MasterId BIGI

  • 在 Pandoc Markdown 输出中生成内联而不是列表式脚注？

    当从某种格式 例如 HTML 或 Docx 转换为 Pandoc 中的 Markdown 时 是否可以以内联样式呈现所有脚注 这是主要文本 这是脚注 而不是作为编号引用文档末尾有相应的列表吗 我想将我的 Markdown 文档 从我的论文的

  • Azure DevOps Pipelines - Python - ModuleNotFoundError，尽管 sys.path.append() 或设置 PYTHONPATH

    我正在尝试为我的 python 应用程序运行一些测试 但我无法正确设置路径 以便我的test py可以找到它 我的应用程序的结构如下 repo src main python main module repo tests test py A

  • tf.get_collection 提取一个范围的变量

    I have n 例如 n 3 范围和x 例如 x 4 每个作用域中定义的变量数量 范围是 model generator 0 model generator 1 model generator 2 计算损失后 我想根据运行时的标准从其中一

  • 根据条件删除行

    因此 第 1 列由各种名称组成 如果该列中特定单元格中的名称不属于名称子集 我想删除整行 我尝试使用嵌套的 If 和 For 来遍历行 但事实证明按升序删除行不起作用 现在 我希望 for 循环从最终值开始到初始值 并且我在最后使用了 St

  • addEventListener 匿名函数中的 Javascript 变量范围

    单击每个 div 时 如果单击了 div 1 则应发出警报 1 如果单击了 div 2 则应发出警报 5 我试图使此代码尽可能简单 因为这是在更大的应用程序中需要的

  • 如何在各种环境下使用和配置omniauth与yahoo、google、facebook策略？

    我正在开发一个 Rails 3 2 应用程序 该应用程序将允许用户向多个提供商进行身份验证 雅虎 谷歌 Facebook 和 或 Twitter 我们正在使用omniauth 虽然我了解基本工作流程 但我找不到一个包容性文档来说明应如何配置

  • 重写骨干模型中的 fetch() 方法

    我想重写 Backbone 模型中的默认 fetch 方法 从而仅在需要时调用它 像这样的东西 Account Check Backbone Model extend model Account Item url Settings Url

  • CSS中宽度除以高度得到屏幕比例

    我尝试获取屏幕的比 例 这是我尝试过的CSS 但它不起作用 height calc 50vw calc 1vw 1vh 3 如何获得屏幕宽度除以屏幕高度 Thanks First of all calc is not nestable 1

  • Makefile 找不到 macports 安装的 boost 库

    我刚刚使用 macports 安装了 boost 1 42 0sudo port install boost 一切都很好 现在我有一个项目 我正在尝试使用 makefile 构建 一切都构建得很好 直到涉及到需要 boost 库的文件为止

  • 如何在远程 ssh 连接中本地绘制 R 绘图？

    我目前通过 ssh 连接到一台远程计算机 我在 VIM 中设置了 R 我两边都用ubuntu 当我尝试从 R 绘制某些内容时 它将出现在远程计算机而不是本地计算机上 有什么办法可以在本地制作 R 绘图吗 您可以将 SSH 与 X切换以将图形

  • DIV 左侧垂直滚动条

    是否可以用css将DIV的垂直滚动条放在div的左侧 jscript 怎么样 我有一个简单的用例 所以选择了一个简单的 css 解决方案 div style height 250px div style padding 3px Conten

  • 使用 vanilla JS 添加 CSS 规则的最短方法

    我正在开发一个库 试图将其保持在 1KB 以下 我已经非常接近我的极限了 我需要添加一个 CSS 规则来控制显示隐藏行为 hidden display none important HTML 页面没有任何样式标签 这将是我唯一需要的规则 我

热门标签