Question

我必须在当前页面的标题中使用Javascript或JQuery放置CSS（标题中的块）。 css采用文本格式，如下所示（来自服务器）：

label { font-family: Verdana, sans-serif; font-size: 12px; display: block; }
input { padding: 3px 5px; width: 250px; margin: 0 0 10px; }
input[type="file"] { padding-left: 0; }
input[type="submit"] { width: auto; }

我想把这个CSS放在标题块中，使用这样的JavaScript：

<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<style type="text/css">
    label { font-family: Verdana, sans-serif; font-size: 12px; display: block; }
    input { padding: 3px 5px; width: 250px; margin: 0 0 10px; }
    input[type="file"] { padding-left: 0; }
    input[type="submit"] { width: auto; }
</style>
</head>

有可能吗？

谢谢！

Answer 1

使用jQuery，您可以这样做：

 $('<style type="text/css"> ' + myCSS + '</style>').appendTo('head');

Answer 2

您可以使用jquery执行此操作。做这样的事情：

$("head").append("<style type=\"text/css\">" + {your content} + "</style>");

Answer 3

使用jQuery，您应该可以执行append

$('head').append(' //stick the whole thing here ');

Answer 4

是的，可以查看本教程，以便了解它是如何完成的：http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

编辑：如果你不需要在正文中运行脚本，那么这里也有类似的问题：Add CSS to <head> with JavaScript?

function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var styleElement = document.createElement('style');
    styleElement.setAttribute('type', 'text/css');
    if (styleElement.styleSheet) {   // IE
        styleElement.styleSheet.cssText = css;
    } else {                // the world
        styleElement.appendChild(document.createTextNode(css));
    }
    head.appendChild(styleElement);
 }

Answer 5

我发现这个lib可能会有所帮助：

https://github.com/cssobj/cssobj

它将JSOM中的CSSOM渲染为<head>，您可以直接从JS Object更改规则。

DEMO：https://cssobj.github.io/cssobj-demo/

Answer 6

试试这个：

<script type="text/javascript">
 var css = document.createElement('style');
 css.type = 'text/css';

 var styles = 'your_server_response_css_rules';

 if (css.styleSheet)
     css.styleSheet.cssText = styles;
 else 
     css.appendChild(document.createTextNode(styles));

 document.getElementsByTagName("head")[0].appendChild(css);
</script>

用JS将CSS放入头文件中

6 个答案: