Question

所以我正在尝试为这个项目进行一些研究，我将要做的一个项目，我想为什么不从一些真正的javascript专家那里得到一些反馈：）

我需要创建一堆“css，js，html”模板，这些模板将在单个页面中内联并通过客户端上已构建的系统注入到网页中。我要做的就是制作“font-size”，“color”，“background-color”，“img [src]”和“a [href]”等可编辑的东西，这样我就需要为这些参数创建变量然后通过vanilla javascript控制它们。

我想知道并获得反馈的是使用vanilla javascript进行此操作的最佳方法是什么？

非常感谢任何帮助或反馈!!

谢谢

Answer 1

虽然可以在vanilla JavaScript中执行此操作，但我建议您不要尝试。访问页面样式表的API是......呃......可能会更好吗？

有关如何从JavaScript操作样式表的一些想法，请参阅以下问题：

接下来，我建议您的服务器插入代码来加载框架来操作样式表。之后，您应该加载第二个脚本，该脚本使用框架来操作样式。

但最终，在服务器上查看SASS或LESS以从强大的元语言编译CSS可能会更简单，该语言允许您使用变量。

Answer 2

我是否正确理解如下：

用户将编辑页面上的字段，例如“font-size：”，您希望页面根据输入的内容动态更改？

如果是这样，我认为您需要探索的第一件事是jQuery。 jQuery有一些方法可以让你动态地改变CSS（例如font-size或background-color）。您可以使用它在特定事件上执行这些方法，例如单击提交按钮。

所以你有类似

的东西

//prepare the function that we want to be executed on submit button click
var makeChangesToPage = function() {
    //record the user-entered value for the background color and store it as variable "bgcolor"
    var bgcolor = $('#bgcolorfield').val();

    //now change the CSS of the page (document.body) so that the background color is now equal to our stored bgcolor value
    $(document.body).css('background-color', bgcolor);
}

//tell jQuery to kick off those changes whenever the button is actually clicked
$('#button_submit').click( makeChangesToPage() );

我在上面使用了$（'＃something'），这是一个jQuery选择器，用于查找已将id设置为“something”的任何HTML元素，例如对于提交按钮，我们在第一次设置其ID时在我们的HTML中创建页面上的按钮：

<input type="submit" id="button_submit" value="Submit">

然后我们可以使用jQuery选择器“找到”它在我们的JavaScript中使用：

var myButton = $('#button_submit');

我已经离开了大部分相关和任何其他jQuery / CSS更改（在背景颜色之后）供您继续工作，但这应该会让您朝着正确的方向前进。

用vanilla javascript操纵和编辑预定的css变量

2 个答案: