怎么用js或jq修改@media print中的CSS属性?

cyyssly 2017-04-21 12:19:08
比如,有一个默认这样的打印样式:
<style type="text/css" media=print>
.panel {
border: none;
}
</style>
我想允许用户自行修改打印样式,并根据用户设置动态修改样式,比如修改为border: 1pt solid black;
这种情况用jq应该怎么写呢?平时用的$("element").css("属性名",“属性值”);只能改变屏幕显示样式,而不能改变打印样式。
...全文
1718 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
cyyssly 2017-04-27
  • 打赏
  • 举报
回复
结帖了,多谢各位的回复和帮助。
cyyssly 2017-04-27
  • 打赏
  • 举报
回复
引用 7 楼 bigbird_561 的回复:
你为什么不用css直接做呢!js可以添加class,你利用优先级啊,这样只要modify class即可

 .panel {
        border: none;
    }
  .user_click{
       border:1px solid;
   }
@media print{
   .panel{
        border:none;
    }
    .user_click{
         border:1px solid;    
    }
}
这个思路真的很不错,如果选择的类别有限的话还是挺实用的。不过我是需要提供一个灵活定制打印格式的功能,或者说类似于WORD那种打印预览并且可以调整格式的功能,所以没办法用这种思路解决。不过还是非常感谢!
  • 打赏
  • 举报
回复
引用 6 楼 cyyssly 的回复:
引用 4 楼 showbo 的回复:
[quote=引用 3 楼 cyyssly 的回复:] 谢谢2楼,很强大!不过本质上跟我的实现思路还是一样的。就是很好奇JQ里面有没有类似于@media之类的选择器呢?
没有。。更改css文件不是jquery做的,你只能新增style进行覆盖
动态更改CSS样式不是用JS吗?$("element").css("属性名",“属性值”)这种方式,或者动态添加删除class的方式,都是通过JS啊。[/quote]那个是修改dom的,不是级联样式表的,jquery没提供级联样式表的修改。
引用 5 楼 cn00439805 的回复:
引用 4 楼 showbo 的回复:
[quote=引用 3 楼 cyyssly 的回复:] 谢谢2楼,很强大!不过本质上跟我的实现思路还是一样的。就是很好奇JQ里面有没有类似于@media之类的选择器呢?
没有。。更改css文件不是jquery做的,你只能新增style进行覆盖
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
  • 打赏
  • 举报
回复
引用 4 楼 showbo 的回复:
引用 3 楼 cyyssly 的回复:
谢谢2楼,很强大!不过本质上跟我的实现思路还是一样的。就是很好奇JQ里面有没有类似于@media之类的选择器呢?
没有。。更改css文件不是jquery做的,你只能新增style进行覆盖
动态更改CSS样式不是用JS吗?$("element").css("属性名",“属性值”)这种方式,或者动态添加删除class的方式,都是通过JS啊。
cn00439805 2017-04-22
  • 打赏
  • 举报
回复
引用 4 楼 showbo 的回复:
引用 3 楼 cyyssly 的回复:
谢谢2楼,很强大!不过本质上跟我的实现思路还是一样的。就是很好奇JQ里面有没有类似于@media之类的选择器呢?
没有。。更改css文件不是jquery做的,你只能新增style进行覆盖
2楼的例子不就是更改了吗,什么叫只能新增?
  • 打赏
  • 举报
回复
引用 3 楼 cyyssly 的回复:
谢谢2楼,很强大!不过本质上跟我的实现思路还是一样的。就是很好奇JQ里面有没有类似于@media之类的选择器呢?
没有。。更改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);
内容概要:本文系统阐述了嵌入式功能安全领域的两大核心标准——IEC 61508与ISO 26262的完整体系,涵盖其定位、关系、技术要求及认证流程。IEC 61508作为通用工业功能安全基础标准,适用于PLC、机器人、轨道交通等系统,采用SIL等级划分;ISO 26262则是其在汽车行业的衍生标准,专用于车载电控单元(如BMS、ESP、自动驾驶控制器),采用ASIL等级评估。文章详细解析了两个标准在风险评估方法(如HARA与风险图法)、软硬件设计规范、失效分析、安全机制实现(如看门狗、CRC校验、冗余设计)等方面的异同,并提供了从需求分析到认证落地的全流程实施路径,包括安全生命周期管理、文档证据链构建及第三方认证机构介绍。; 适合人群:从事工业自动化或汽车电子领域嵌入式系统设计、功能安全开发与认证工作的工程师、项目经理及安全分析师,具备一定电子电气或软件开发背景的专业人员; 使用场景及目标:①指导企业开展符合IEC 61508或ISO 26262的功能安全产品设计与认证;②帮助研发团队理解SIL/ASIL等级判定逻辑与软硬件安全机制实现方式;③支持撰写安全需求文档、FMEDA报告及准备第三方审核材料; 阅读建议:此资源兼具理论体系与工程实践,建议结合具体项目场景对照标准条款进行研读,并重点关注安全生命周期各阶段的交付物要求与典型安全防护设计示例,以提升实际应用能力。

87,989

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧