在选择仅在该div中的文本后,在div中的大小

我正在使用下面的代码来更改<div>本的字体大小。 它会更改字体大小,但首先您需要从下拉列表中选择大小,然后单击该文本,然后才会影响字体大小。 不过,我希望所选文字的字体大小能立即更改。 你可以帮我吗?

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>

脚本

$(".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());
});

如果选择了文本,则无法捕捉事件,但可以使用mousedown / mouseup来模拟它并检查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");
    });
});

在JSFiddle上检查它

upd :感谢减号。 更新了答案


这项工作适合你

$("div").focus(function(){
$(this).css('font-size', $('dropdown').val());
});

首先,你可以从下拉菜单中选择字体大小,然后关注div jquery从下拉元素中获取大小并更改divfont以及


做到这一点,看看..

$("#size").change(function() {
    $(".name, .address, .address1").css('font-size', $('#size').val() + "px");
});
链接地址: http://www.djcxy.com/p/14481.html

上一篇: size in a div after selecting the text only in that div

下一篇: where are the variable stored that are initialized in main function in c?