当我无法更改网站的 CSS，只能添加内容时，如何将网页上所有文本和图像的大小缩放一定数量？
我想将文本缩放 200%，将所有 img 元素缩放 150%。我可以执行 JavaScript 并用它添加新的 CSS，但我无法更改网络服务器给我的内容。 JavaScript 应该很短，所以我不能用我自己的 CSS 替换所有原始 CSS，无论如何这应该适用于多个站点。
我的浏览器没有这种缩放功能。哪个 JavaScript 片段可以完成此任务？
编辑:
jQuery 似乎是要走的路，剩下的问题是调整所有文本节点的 CSS，而不累积缩放内部文本节点。这是我现在在 bookmerklet 中的 JavaScript:
javascript:
(function(){
var d=document;
var h=d.getElementsByTagName("head")[0];
var b=d.getElementsByTagName("body")[0];
var s=d.createElement("style");
s.appendChild(document.createTextNode('@media screen and (orientation: landscape) {\n'+'@-ms-viewport {\n'+'width: 800px;\n'+'}\n'+'}\n'+'@media screen and (orientation: portrait) {\n'+'@-ms-viewport {\n'+'width: 1000px;\n'+'}\n'+'}\n'+'html {\n'+'-ms-text-size-adjust:none;\n'+'}'));
h.appendChild(s);
var j=d.createElement("script");
j.type='text/javascript';
j.src='http://code.jquery.com/jquery-2.0.0.js';
b.appendChild(j);
eval('$("*").each(function(){'+
'if($(this).text()!=""){'+
'fontSize=parseInt($(this).css("font-size"))*2;'+
'$(this).css("font-size",fontSize);'+
'}'+
'});');
eval('$("img").each(function(){'+
'imageWidth=this.width*2.5;'+
'$(this).css("width",imageWidth);'+
'});');`enter code here`
}
)()
我正在使用 Bookmarklet Builder 来开发解决方案: http://subsimple.com/bookmarklets/jsbuilder.htm
最佳答案
如果你可以添加新的 CSS，然后定义类 f.e。 “大的”。根据需要定义 .big p、.big div、.big img 等。比你可以通过 javascript 将这个类添加到 body 元素。
看看我写的这个例子:
<html><head><title>Example</title>
<style>
/* this is basic definition */
body {
font-size:20px;
}
/* this is definition you will add in your css */
.big {
font-size:200%;
}
</style>
<script>
function change(x) {
document.body.className=x?"big":"";
}
</script>
</head>
<body>
<div>Blablablabla</div>
<input type="button" onclick="change(1);" value="Zoom">
<input type="button" onclick="change(0);" value="Unzoom">
</body></html>
关于javascript - 在不改变原始 CSS 的情况下改变字体和图像大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16809792/