2015-10-21 4 views
0

Я пытаюсь редактировать значения css с использованием JavaScript/JQuery. У меня есть variable я создал, и я хочу, чтобы назначить его как это:Применить значение css с помощью JavaScript/JQuery

var amount = 200; 
$("p").css({"background-color": "yellow", "font-size": "amount%"}); // 200% 

Это относится только цвет, а не размер шрифта. Что я делаю неправильно, и как я могу это исправить?

Вот JSFiddle, а вот код:

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     
 
     var amount = 200; 
 
     $("p").css({"background-color": "yellow", "font-size": "amount%"}); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
<h2>This is a heading</h2> 
 

 
<p style="background-color:#ff0000">This is a paragraph.</p> 
 
<p style="background-color:#00ff00">This is a paragraph.</p> 
 
<p style="background-color:#0000ff">This is a paragraph.</p> 
 

 
<p>This is a paragraph.</p> 
 

 
<button>Set background-color of p</button> 
 

 
</body>

+0

Изменение ' "Сумма%"' в 'сумма + "%"' – Griffith

ответ

0

это "amount%" будет строка со значением "сумма%". но то, что вы хотите amount + "%", что изменилось в 200%

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     
 
     var amount = 200; 
 
     $("p").css({"background-color": "yellow", "font-size": amount+"%"}); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
<h2>This is a heading</h2> 
 

 
<p style="background-color:#ff0000">This is a paragraph.</p> 
 
<p style="background-color:#00ff00">This is a paragraph.</p> 
 
<p style="background-color:#0000ff">This is a paragraph.</p> 
 

 
<p>This is a paragraph.</p> 
 

 
<button>Set background-color of p</button> 
 

 
</body>

+0

Когда я должен использовать ' '$''? – Jessica

+0

Я действительно не понимаю, что вы имеете в виду, но $ - имя функции jQuery, когда вы хотите выбрать и найти некоторые вещи в своем документе, который вы используете, он возвращает объект jQuery objecy. – Omidam81

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