gpt4 book ai didi

javascript - 使用 Javascript 或 jQuery 将 CSS 添加到所有 HTML 元素

转载 作者:行者123 更新时间:2023-12-03 06:00:05 26 4
gpt4 key购买 nike

我想获取 CSS 选择器、属性和值,并使用 jQuery 或 Javascript 将其添加到 HTML。

到目前为止我尝试过的是:

function toggleCSS() {
var preview = document.getElementById("preview");
var previewChildren = document.getElementById("preview").querySelectorAll("*"); // Get all of the elements created in the preview from the users HTML input
var cssToAdd = document.getElementById("cssTextArea").value; // The user is going to type in regular CSS into a textarea, and here I am retrieving the value they typed in

$(previewChildren).each( function() {
$(this).css(); // Looping through each node
});
}

输入示例:(HTML)

<html>
<head>
<title>Test</title>
</head>

<body>

<div>
Hello World!
</div>

<div id="TestDiv">
This is a test!
</div>
</html>

(CSS)

#TestDiv {
background-color: red;
}

我在添加 CSS 的过程中遇到了困难。我在变量 cssToAdd 中有原始输入,但如何转换该 CSS 以获取选择器并将该选择器中的属性添加到每个 HTML 元素?

最佳答案

如果用户输入正确且完整的CSS规则,只需将其全部包装在 <style> 中标记并附加到 <head>

$('<style>').text(cssToAdd).appendTo('head');

关于javascript - 使用 Javascript 或 jQuery 将 CSS 添加到所有 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39781856/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com