0

当我无法更改网站的 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

4

2 回答 2

0

有点晚了，但你可以使用 jQuery：

$('#scaled *').each(function(){
  if ($(this).text() != '') 
      fontSize = parseInt($(this).css("font-size")) * 2 //incease by 100%;
      $(this).css('font-size',fontSize);
});

$('#scaled img').each(function(){ 
    imageWidth = this.width * 2.5; //incease by 150%
    $(this).css('width',imageWidth);
})

我已经用小提琴说明了我的答案 - http://jsfiddle.net/kA6fm/2/

于 2013-05-29T09:37:10.010 回答
0

如果您可以添加新的 CSS，则在此处定义 class fe“big”。根据需要定义 .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>
于 2013-05-29T09:28:42.583 回答