원본 CSS를 변경하지 않고 글꼴 및 이미지 크기 변경

웹 사이트의 CSS를 변경할 수없는 경우 웹 페이지의 모든 텍스트 및 이미지의 크기를 얼마만큼 변경할 수 있습니까?원본 CSS를 변경하지 않고 글꼴 및 이미지 크기 변경

텍스트를 200 %로, 모든 img- 요소를 150 %로 스케일링하고 싶습니다. JavaScript를 실행하고 새 CSS를 추가 할 수는 있지만 웹 서버가 제공하는 내용을 변경할 수는 없습니다. 자바 스크립트는 짧아야하므로 원래 CSS를 모두 내 웹 사이트로 대체 할 수는 없으며 어떤 경우이든 여러 사이트에서 작동해야합니다.

내가 가지고있는 브라우저에는 이러한 종류의 확대/축소 기능이 없습니다. 어떤 JavaScript 스 니펫이이를 수행합니까?

편집 :

jQuery를 누적 내부 텍스트 노드를 확장하지 않고, 남은 문제는 모든 텍스트 노드에 대한 CSS를 조정되는 길을 가야하는 것처럼 보인다. 내가 솔루션 개발 북마크 Builder를 사용하고

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` 
} 
)()

을 : : 여기가 bookmerklet 지금이 자바 스크립트의 새로운 CSS를 추가 할 수 있습니다 http://subsimple.com/bookmarklets/jsbuilder.htm

출처

2013-05-29 Timo Kinnunen

특정 브라우저의 사용자 또는 사용자에게 분명히 필요할 것입니다. 브라우저를 식별해야합니다. 스타일 속성을 조작하는 방법은 브라우저에 의존하는 경향이 있습니다. –

IE10 데스크톱 버전을 사용하여 솔루션을 테스트하고 있습니다. 뷰포트 크기를 제한하기 위해 Microsoft 고유의 -ms-viewport CSS 특성을 사용하고 있지만 CSS와 JavaScript는 다른 공급 업체별 변경이 필요하지 않아야합니다. 이전 IE 버전과의 하위 호환이 필요하지 않습니다. –

가, 다음이 클래스 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

이것은 작동하지 않았습니다. 이것을 북마크 릿으로 수정하고이 웹 페이지에서 시도했습니다. 본문의 클래스 속성이 empty와 "big"사이에서 변경 되더라도이 페이지의 텍스트 크기는 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를 변경하지 않고 글꼴 및 이미지 크기 변경

답변

관련 문제