在不更改原始CSS的情況下更改字體和圖像大小

當我無法對網站的CSS進行更改時，如何才能在網頁上縮放所有文本和圖像的大小，只添加？在不更改原始CSS的情況下更改字體和圖像大小

我想縮放200％的文本和所有img元素150％。我可以執行JavaScript並添加新的CSS，但我無法更改Web服務器給我的內容。 JavaScript應該很短，所以我不能用我自己的所有原始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` 
} 
)()

我使用小書籤Builder開發的解決方案： http://subsimple.com/bookmarklets/jsbuilder.htm

來源

2013-05-29 Timo Kinnunen

由於這對於某個特定瀏覽器的用戶或用戶顯然是需要的，您應該標識瀏覽器。操縱樣式屬性的方法往往依賴於瀏覽器。 –

我正在使用IE10桌面版測試解決方案。我使用Microsoft特定的-ms-viewport CSS屬性來約束視口大小，但期望CSS和JavaScript不應該需要任何其他供應商特定的更改。我不需要與早期的IE版本向後兼容。 –

如果你可以添加新的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>

來源

2013-05-29 09:28:42

這沒有奏效。我將其修改爲小書籤，並在此網頁上嘗試過。雖然body的類屬性在空和「大」之間變化，但是這個頁面上文本的大小不會變爲200％。 –

我使用的Bookmarklet Builder和代碼在這裏[鏈接]（http://closure-compiler.appspot.com/code/jsc9a899c2e54ab15801957b56b76102704/default.js） –

有點晚了，但你可以使用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-29 09:37:10 Alex

將字體大小設置爲200％不會使元素的字體大小加倍目前有。相反，它使字體大小是父元素字體大小的兩倍。當元素嵌套（並且通常是）時，累積效應將是嚴重的。 –

@Jukka K. Korpela - 好點！我看完了，我已經更新了我的答案。 – Alex

使用jQuery更改圖像的工作方式使jQuery看起來像是一條路。然而，縮放文本使用此代碼可以將整個頁面吹到很大的比例。我將編輯我的問題以包含我在jQuery中的位置。 –

在不更改原始CSS的情況下更改字體和圖像大小

回答

相關問題