Изменить размер шрифта и размер изображения без изменения оригинала CSS

Как я могу масштабировать размер всего текста и изображений на веб-странице на какую-то сумму, если я не могу внести изменения в CSS сайта, только дополнения?Изменить размер шрифта и размер изображения без изменения оригинала CSS

Я хочу масштабировать текст на 200% и все img-элементы на 150%. Я могу выполнить JavaScript и добавить к нему новый CSS, но я не могу изменить контент, который дает мне веб-сервер. JavaScript должен быть коротким, поэтому я не могу заменить весь оригинальный CSS своим собственным, и в любом случае это должно работать с несколькими сайтами.

Браузер, который у меня есть, не включает эту функцию масштабирования. Какой фрагмент кода JavaScript выполнит это?

Edit:

JQuery кажется, что путь, оставшаяся проблема настройки CSS для всех текстовых узлов без кумулятивно масштабирования внутренних текстовых узлов. Вот JavaScript, что у меня сейчас в bookmerklet:

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. Я использую атрибут CSS-view -ms-viewport для Microsoft, чтобы ограничить размер видового экрана, но ожидайте, что 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

Это не сработало. Я изменил это в букмарклет и попробовал его на этой веб-странице. Хотя атрибут класса тела изменяется между пустым и «большим», размер текста на этой странице не изменяется до 200%. –

Я использовал Закладчик 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% не удваивает размер шрифта, который элемент в настоящее время имеет. Вместо этого размер шрифта в два раза превышает размер шрифта родительского элемента. Когда элементы вложены (и обычно они), кумулятивный эффект будет валидным. –

@ Юкка К. Корпела - Хорошая мысль! Я уже посмотрел, я обновил свой ответ. – Alex

Изменение изображений с помощью jQuery работает, поэтому jQuery кажется таким, каким он есть. Тем не менее, масштабирование текста приводит к тому, что вся страница сдувается до огромных размеров с помощью этого кода. Я отредактирую свой вопрос, чтобы включить, где я нахожусь с jQuery. –

Изменить размер шрифта и размер изображения без изменения оригинала CSS

ответ

Смежные вопросы