如何使用 ID 选择器创建动态样式表？

发布于 2024-12-04 02:55:46 字数 640 浏览 0 评论 0原文

我希望能够让以下代码工作：

var head = document.getElementsByTagName("head")[0];
var style = document.createElement( "style" );

style.type = "text/css";
style.media = "print";
style.styleSheet.cssText = "#menu {display:none;}";
head.appendChild( style );
window.print();

问题是它最终会出现以下样式：
UNKNOWN {display:none;}

我也尝试过使用 addRule 得到相同的结果，实际上它错误地显示“无效参数”并且没有设置任何内容。

我想要完成的是动态隐藏给定页面中的某些元素以不打印，这些元素使用不同的标签、格式和类，因此没有通用的方法来排除它们（至少我能想到）不使用 ID 选择器。

这是针对使用 IE7 的 Intranet 上的业务应用程序。

我当前唯一的解决方法是将此信息发送到 ASP，然后将其作为样式表返回，这样我就可以将其用作 href 样式表，因为这就是我能想到的使用 ID 选择器动态创建样式表的全部内容。

提前致谢。

原文

I want to be able to get the following code to work:

var head = document.getElementsByTagName("head")[0];
var style = document.createElement( "style" );

style.type = "text/css";
style.media = "print";
style.styleSheet.cssText = "#menu {display:none;}";
head.appendChild( style );
window.print();

The problem is that it ends up with the following style:
UNKNOWN {display:none;}

I've also tried using addRule with the same result, well actually it errors with "Invalid argument" and nothing is set.

What I'm trying to accomplish is to dynamically hide some elements within a given page to not print, these elements use different tags, formats, and classes, so there is no generic way to exclude them (at least that I can think of) without using an ID selector.

This is for a business application on an intranet using IE7.

My only current workaround is to send this information to an ASP to just return it back as a stylesheet so I can use it as an href stylesheet since that is all I can think of to dynamically create a stylesheet using ID selectors.

Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黎夕旧梦 2024-12-11 02:55:46

对我来说，只要使用 .innerHTML 就可以了。我使用的是 Chrome，看来您使用的是 Internet Explorer。不过，使用 .innerHTML，您可以简单地设置内容（即在

之间）。

var head = document.getElementsByTagName("head")[0];
var style = document.createElement( "style" );

style.type = "text/css";
style.media = "print";
style.innerHTML = "#menu {display:none;}";
head.appendChild( style );
window.print();

For me, it works if you just use .innerHTML. I'm on Chrome though, it looks like you're on Internet Explorer. Nevertheless, using .innerHTML, you can simply set the contents (i.e. between <style> and </style>).

var head = document.getElementsByTagName("head")[0];
var style = document.createElement( "style" );

style.type = "text/css";
style.media = "print";
style.innerHTML = "#menu {display:none;}";
head.appendChild( style );
window.print();

回复收藏 0 原文

画尸师 2024-12-11 02:55:46

尝试：

var head = document.getElementsByTagName("head")[0];
var style = document.createElement( "style" );
style.type = "text/css";
style.media = "print";
style.text = "#menu {display:none;}";
head.appendChild( style );

Try:

var head = document.getElementsByTagName("head")[0];
var style = document.createElement( "style" );
style.type = "text/css";
style.media = "print";
style.text = "#menu {display:none;}";
head.appendChild( style );

回复收藏 0 原文

~没有更多了~