0

Web サイトの CSS を変更できず、追加のみを行うことができる場合、Web ページ上のすべてのテキストと画像のサイズをある程度拡大するにはどうすればよいですか?

テキストを 200% 拡大し、すべての img 要素を 150% 拡大したいと考えています。JavaScript を実行して新しい CSS を追加することはできますが、Web サーバーが提供するコンテンツを変更することはできません。JavaScript は短くする必要があるため、元の CSS をすべて自分のものに置き換えることはできません。いずれにせよ、これは複数のサイトで機能するはずです。

私が持っているブラウザには、この種のズーム機能は含まれていません。これを実現する JavaScript スニペットはどれですか?

編集：

jQuery は進むべき道のように思えますが、残りの問題は、内部テキスト ノードを累積的にスケーリングせずに、すべてのテキスト ノードの CSS を調整することです。ブックマークレットにある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 に答える