blocks|key|874162|text|您可以修改样式表中对象的参数。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|874163|document.styleSheets[i].rules[j].style.marginTop+=+"100px";|code-block|syntax|javascript|874164|i是与要编辑的工作表对应的数字。|offset|length|style|CODE|874165|和|874166|j是您想要更改参数的元素规则。|874167|在本例中，我使用marginTop作为参数，使用100px作为值，但它可以是任何有效的CSS。|874168|entityMap^0|0|0|0|1|0|0|0|1|0|8|9|O|5|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@$I|14|J|15|K|L]|$I|16|J|17|K|L]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|T|$]]

Well, you can modify the parameters of objects in your stylesheets. For example:

<pre><code>document.styleSheets[i].rules[j].style.marginTop = "100px";
</code></pre>

<code>i</code> being the number corresponding to the sheet you want to edit

and

<code>j</code> being which element rule you want to change the parameter for.

In this case I used <code>marginTop</code> as a paramater and <code>100px</code> as a value but it could be whatever valid CSS you would like.

blocks|key|874203|text|简单..。(假设这就是你想要达到的目标)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|874204|​|874205|var+elem+=+document.getElementsByClassName('target_class');
//+should+use+for+loop+to+assign+click+event+to+each+element+containing+this+class
elem[0].onclick+=+function()+{
++elem[0].style.background+=+'green';
++elem[0].style.opacity+=+'0.2';
}|code-block|syntax|javascript|874206|<div+class="target_class"+style="width:+200px;+height:+200px;+background:+red"></div>|874207|874208|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

simple... (assuming this is what you trying to achieve)

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var elem = document.getElementsByClassName('target_class');
// should use for loop to assign click event to each element containing this class
elem[0].onclick = function() {
 elem[0].style.background = 'green';
 elem[0].style.opacity = '0.2';
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="target_class" style="width: 200px; height: 200px; background: red"&gt;&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|2841228|text|insertRule(规则，索引)这将向样式表插入一个新规则，其中参数"+rule“是包含要添加的整个规则的字符串(即：#myid{color:+red；边框:+1px+solid+black})和"index"，这是一个整数，指定要插入新规则的cssRules[]中的位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2841229|document.styleSheets[0].insertRule("p{font-size:+20px;}",+0)+//add+new+rule+to+start+of+stylesheet|code-block|syntax|javascript|2841230|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

insertRule(rule, index)
This will inserts a new rule to the stylesheet, where the parameter &quot;rule&quot; is a string containing the entire rule to add (ie: #myid{color: red; border: 1px solid black}), and &quot;index&quot;, an integer specifying the position within cssRules[] to insert the new rule.
<pre class="lang-js prettyprint-override"><code>document.styleSheets[0].insertRule(&quot;p{font-size: 20px;}&quot;, 0) //add new rule to start of stylesheet
</code></pre>

Suppose I have a CSS file custom_style.css and a HTML file custom_render.html.

custom_render.html contains some input field to take input from user and than generates CSS styles based on those input.

Now I want to store those generated CSS styles in a CSS file called custom_style.css [that is located in my projects root directory], so that I can show the users a preview/output of their selections.

After googling I got a way to store those generated CSS in the same file [custom_render.html] using JavaScript, but I want to store them in custom_style.css.

Can anyone tell me how can I write CSS Styles in CSS files using JavaScript or other JavaScript framework. 
- Thanks

How to write CSS styles in a CSS files using JS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

假设我有一个CSS文件custom_style.css和一个custom_render.html.文件custom_render.html包含从用户获取输入的输入字段，并根据这些输入生成CSS样式。现在，我希望将那些custom_style.css生成的CSS样式存储在一个名为的CSS文件中，该文件位于我的项目根目录中...

问如何使用JS在CSS文件中编写CSS样式？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JS在CSS文件中编写CSS样式？EN