87,990
社区成员
发帖
与我相关
我的任务
分享怎么用js或jq修改@media print中的CSS属性？
比如，有一个默认这样的打印样式：
<style type="text/css" media=print>
.panel {
border: none;
}
</style>
我想允许用户自行修改打印样式，并根据用户设置动态修改样式，比如修改为border: 1pt solid black;
这种情况用jq应该怎么写呢？平时用的$("element").css("属性名",“属性值”);只能改变屏幕显示样式，而不能改变打印样式。
<style type="text/css" media=print>
.panel {
border: none;
}
</style>
我想允许用户自行修改打印样式，并根据用户设置动态修改样式，比如修改为border: 1pt solid black;
这种情况用jq应该怎么写呢？平时用的$("element").css("属性名",“属性值”);只能改变屏幕显示样式，而不能改变打印样式。
...全文
请发表友善的回复…
发表回复
cyyssly 2017-04-27
- 打赏
- 举报
结帖了，多谢各位的回复和帮助。
cyyssly 2017-04-27
- 打赏
- 举报
这个思路真的很不错，如果选择的类别有限的话还是挺实用的。不过我是需要提供一个灵活定制打印格式的功能，或者说类似于WORD那种打印预览并且可以调整格式的功能，所以没办法用这种思路解决。不过还是非常感谢！
斯洛文尼亚旅游 2017-04-24
- 打赏
- 举报
动态更改CSS样式不是用JS吗？$("element").css("属性名",“属性值”)这种方式，或者动态添加删除class的方式，都是通过JS啊。[/quote]那个是修改dom的，不是级联样式表的，jquery没提供级联样式表的修改。
2楼的例子不就是更改了吗，什么叫只能新增?[/quote]2楼的也行，通过级联styleSheet来修改，但是比较麻烦，如果类名称复杂怕是不好使。。直接head append一个style标签，增加新样式覆盖下方便。
bigbird_561 2017-04-24
- 打赏
- 举报
你为什么不用css直接做呢！js可以添加class，你利用优先级啊，这样只要modify class即可
.panel {
border: none;
}
.user_click{
border:1px solid;
}
@media print{
.panel{
border:none;
}
.user_click{
border:1px solid;
}
}
cyyssly 2017-04-24
- 打赏
- 举报
动态更改CSS样式不是用JS吗？$("element").css("属性名",“属性值”)这种方式，或者动态添加删除class的方式，都是通过JS啊。
cn00439805 2017-04-22
- 打赏
- 举报
2楼的例子不就是更改了吗，什么叫只能新增?
斯洛文尼亚旅游 2017-04-22
- 打赏
- 举报
没有。。更改css文件不是jquery做的，你只能新增style进行覆盖
cyyssly 2017-04-21
- 打赏
- 举报
谢谢2楼，很强大！不过本质上跟我的实现思路还是一样的。就是很好奇JQ里面有没有类似于@media之类的选择器呢？
cn00439805 2017-04-21
- 打赏
- 举报
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"/>
<style>.a{color:#333;}</style>
<style type="text/css" media="print" >
.panel {
font-size:50px;
border:1px solid #ccc;
}
</style>
<style>.b{color:#666;}</style>
</head>
<body>
<div class="panel">cn00439805</div>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
function getStyleSheet(element) {
return element.sheet || element.styleSheet;
}
function insertRule(sheet, selectorText, cssText, position) {
if (sheet.insertRule) {
sheet.insertRule(selectorText + "{" + cssText + "}", position);
} else if (sheet.addRule) {
sheet.addRule(selectorText, cssText, poistion);
}
}
function deleteRule(sheet, index) {
if (sheet.deleteRule) {
sheet.deleteRule(index);
} else if (sheet.removeRule) {
sheet.removeRule(index);
}
}
function modifyRule(sheet,selectorText,cssText){
var rules = sheet.cssRules;
if(!rules.length) return;
for(var i = 0,o;o=rules[i];i++){
var patt = new RegExp("^" + selectorText + "\\s*{.*?}.*?$");
if(patt.test(o.cssText)){
deleteRule(sheet,i);
insertRule(sheet,selectorText,cssText,i);
}
}
}
var mySheet = getStyleSheet($("style[media=print]")[0]);
modifyRule(mySheet, ".panel", "font-size:200px;");
</script>
</body>
</html>
cyyssly 2017-04-21
- 打赏
- 举报
自己找到一种十分恶心的方法，应该还有更好的实现方式：
var style = document.createElement('style');
style.innerHTML = "@media print {.panel {border: thin solid black;}}";
window.document.head.appendChild(style);
