使用 JavaScript 或 jQuery 定义全局 CSS 类？
Posted
技术标签:
【中文标题】使用 JavaScript 或 jQuery 定义全局 CSS 类？【英文标题】：Define global CSS classes using JavaScript or jQuery? 【发布时间】：2013-03-07 19:13:49 【问题描述】：有没有办法使用 javascript 或 jQuery 设置全局类的 CSS？也就是在页面的<style/>标签后追加.my_class foo:bar ？
【问题讨论】：
Is it possible to alter a CSS stylesheet using JavaScript? (NOT the style of an object, but the stylesheet itself) 的可能重复项 可能重复：jQuery create CSS rule / class @ runtime 是的，但是在您网站的源代码中放置一个大警告，提醒将来在该网站上工作的任何人。根据我的经验，动态构建/修改样式表的网站是已知世界中最令人困惑的事情。 对不起，我知道这很可能是一个重复的问题，但我昨天花了几分钟搜索它，只能找到不相关的链接 - 主要是因为结果被关于 jQuery 的 .addClass 的信息所掩盖. 【参考方案1】：纯 JavaScript -
var style=document.createElement('style');
style.type='text/css';
if(style.styleSheet)
style.styleSheet.cssText='your css styles';
else
style.appendChild(document.createTextNode('your css styles'));
document.getElementsByTagName('head')[0].appendChild(style);
【讨论】：
嗯，有两个正确的答案...由 Math.random() 选择。 虽然两个答案都为给定问题提供了正确的解决方案，但出于性能原因，我更喜欢使用纯 javascript，只要我不尝试支持旧 IE 版本。 我将尽快添加全局 CSS，以便根据新 CSS 呈现新元素。此时，jQuery 尚未加载，因此纯 JS 是更好的选择 为什么会有那个 IF？ IF 用于测试是否支持动态样式表的浏览器，尤其是旧 IE...【参考方案2】：是的，你可以在 jQuery 中做到这一点：
var styleTag = $('<style>.my_class foo: bar; </style>')
$('html > head').append(styleTag);
只需在<head> 末尾附加<style> 标签即可。
【讨论】：
嗯，有两个正确的答案...由 Math.random() 选择。 多行样式：让样式=`你的样式在这里多行`；然后： var styletag = $(styles);以上是关于使用 JavaScript 或 jQuery 定义全局 CSS 类？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery动态加载程序-如果jQ未定义或不存在，则使用纯js javascript加载jQuery
如何在使用 jquery 或 JavaScript 播放视频之前或不播放视频之前获取所有视频的持续时间？