size in a div after selecting the text only in that div
I am using the below code to change the font-size of the text in a <div> . 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?
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<form id="myform">
<select id="fs">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Impact">Impact</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</form>
<br/>
<div id="name" class="name">dsfdsfsfdsdfdsf</div>
<div id="address" class="address">sdfsdfdsfdsfdsf</div>
<div id="address1" class="address1">sdfsdfdsfdsfdsf</div>
Script
$(".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());
});
There's no event able to catch if text is selected, but you can use mousedown/mouseup to simulate it and check for window.getSelection():
$(".name, .address, .address1").on("mousedown", function () {
$(this).one("mouseup", function () {
if (window.getSelection().toString().length > 0)
$(this).css('font-size', $('#size').val()+"px");
});
});
Check it at JSFiddle
upd : thanks for minus. Updated answer
this work for you
$("div").focus(function(){
$(this).css('font-size', $('dropdown').val());
});
first you cans select the font size from dropdown then focusing on the div jquery get the size from dropdown element and change the divfont as well
做到这一点，看看..
$("#size").change(function() {
$(".name, .address, .address1").css('font-size', $('#size').val() + "px");
});
上一篇: “模板”的“使用”别名的等价物