Databases
StackOverflow2013
Postsdbo
POHow to change font-size in a div after selecting the text only in that div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to change font-size in a div after selecting the text only in that div
    text
    copied!<p>I am using the below code to change the font-size of the text in a <code>&lt;div&gt;</code>. It changes the font-size, but first you need to select the size in drop-down then click on that text and only then is the font-size affected. However I would like the font-size to be changed immediately for the selected text. Can you help me?</p> <p><strong>HTML</strong></p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt; &lt;/script&gt; &lt;form id="myform"&gt; &lt;select id="fs"&gt; &lt;option value="Arial"&gt;Arial&lt;/option&gt; &lt;option value="Verdana"&gt;Verdana&lt;/option&gt; &lt;option value="Impact"&gt;Impact&lt;/option&gt; &lt;option value="Comic Sans MS"&gt;Comic Sans MS&lt;/option&gt; &lt;/select&gt; &lt;select id="size"&gt; &lt;option value="7"&gt;7&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;option value="20"&gt;20&lt;/option&gt; &lt;option value="30"&gt;30&lt;/option&gt; &lt;/select&gt; &lt;/form&gt; &lt;br/&gt; &lt;div id="name" class="name"&gt;dsfdsfsfdsdfdsf&lt;/div&gt; &lt;div id="address" class="address"&gt;sdfsdfdsfdsfdsf&lt;/div&gt; &lt;div id="address1" class="address1"&gt;sdfsdfdsfdsfdsf&lt;/div&gt; </code></pre> <p><strong>Script</strong></p> <pre><code>$(".name").click(function(){ var id = this.id; $("#"+id).css('font-size', $('#size').val()+"px"); }); $(".name").click(function(){ var id = this.id;//get clicked id $("#"+id).css('font-family', $('#fs').val()); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload