2015-07-04 4 views
1

Ниже представлен javascript, который я использовал для увеличения размера шрифта всего содержимого HTML в #myContent. Странная вещь здесь заключается в том, что всякий раз, когда вызывается функция увеличенияFontSize(), размер шрифта не увеличивается, вместо этого он уменьшается. Может ли какая-то душа советовать, что я сделал неправильно. Спасибо.JQuery для увеличения размера шрифта содержимого HTML в DIV

Я выставил предупреждение на fontSizeStr и fontSize. fontSizeStr читает 14, в то время как fontSize читает 12. Последняя строка должна изменить содержимое на 12 пикселей, но это не так. Шрифт уменьшился.

: 
: 
function increaseFontSize() { 
    var fontSizeStr = $("#myContent").css('font-size'); 
    var fontSize = parseInt (fontSizeStr,10) + 2; 
    $("#myContent").css("font-size", fontSize + "px"); 
} 
: 
: 
: 
<div id="myContent"> 
    <html> 
    : 
    : 
    <p>Actual Contents 1</p> 
    <p>Actual Contents 2</p> 
    : 
    : 
    </html> 
</div> 
: 
: 

[Обновления]: - Добавлено "точки" до конца FONTSIZE. - Изменена от "FONTSIZE" до "размера шрифта"

ответ

1

Вам необходимо обновить

$("#myContent").css("fontSize", fontSize); 

в

$("#myContent").css("font-size", fontSize + "px"); 
+0

Спасибо за ответ. Он по-прежнему сокращает шрифт вместо увеличения размера шрифта. Я тестировал код на обоих устройствах (через Phonegap), которые запускают разные версии Android (4.3, 4.4). Не уверен, почему он работает на одном устройстве, но не на другом. – benjamin

+0

Это должно сработать. Проблема с настройкой размера шрифта - это тот, который я упомянул в ответ. Кажется, есть некоторые другие проблемы, например, что делает html-тег внутри div? Кроме того, будет здорово, если вы создадите скрипку/плункер для того же – nikhil

0
function increaseFontSize() { 
    var fontSizeStr = $("#myContent").css('font-size'); 
    var fontSize = fontSizeStr.substring(fontSizeStr.length-2, fontSizeStr.length); 
    var newFontSize = parseInt (fontSize,10) + 2; 
    $("#myContent").css("font-size", newFontSize + "px"); 
} 
+3

Это 'font-size' –

+0

Спасибо @Gustaf, оцените вашу помощь! –

+0

Спасибо за ответ. Он по-прежнему сокращает шрифт вместо увеличения размера шрифта. Не знаете, почему .... – benjamin

1

добавьте - в fontSize как font-size

$("#myContent").css("font-size", fontSize + "px"); 

Использование

var fontSizeStr= fontSizeStr.substring(0,fontSizeStr.length-2); 
+0

Спасибо за ответ. Он по-прежнему сокращает шрифт вместо увеличения размера шрифта. Не знаю, почему. – benjamin

+1

Можете ли вы добавить '! Mportant', как этот' $ («# myContent»). Css («font-size», fontSize + «px! Important»); 'или попробуйте еще одну вещь, сначала попытайтесь установить значение fix, .css ("font-size", "40px"); 'и проверить, работает ли он –

+0

Вы не можете добавить'! important' через функцию 'css' jQuery – winhowes

0

Вот ваш рабочий код JSFIDDLE.

http://jsfiddle.net/alaksandarjesus/xju2xksp/1/

<div id="myContent"> 
    <p>Actual Contents 1</p> 
    <p>Actual Contents 2</p> 
</div> 
<button onClick="increaseFontSize()">Click Me</button> 

Испытан в моем локальном хосте, с HTML-тегами, его рабочим штрафом.