仅在该div中选择文本后如何更改该div中的字体大小答案

【问题标题】：How to change font-size in a div after selecting the text only in that div仅在该div中选择文本后如何更改该div中的字体大小
【发布时间】：2014-02-14 18:40:36
【问题描述】：

我正在使用下面的代码来更改 <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());
});

【问题讨论】：

标签： jquery html

【解决方案1】：

如果选择了文本，则无法捕获任何事件，但您可以使用 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

更新：感谢减号。更新答案

【讨论】：

感谢您的回答。但它不能满足我的要求。字体大小应仅在选择文本后更改。即，首先我们必须选择文本，然后在下拉菜单中选择字体大小，然后只应更改该 div 的字体大小。

【解决方案2】：

这项工作适合你

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

首先您可以从下拉列表中选择字体大小，然后专注于 div jquery 从下拉元素中获取大小并更改 divfont

【讨论】：

【解决方案3】：

这样做看看..

$("#size").change(function() {
    $(".name, .address, .address1").css('font-size', $('#size').val() + "px");
});

【讨论】：

【解决方案4】：

根据您的问题，我相信您希望在单击它时更改文本大小和字体，同时您希望在更改大小或字体的下拉值后更改大小和字体。

您可以尝试下面的代码来实现这一点。

jQuery：

var current_id;
$("#fs").change(function(){
    $("#"+current_id).css("font-family",$(this).val());

});

$("#size").change(function(){
    $("#"+current_id).css("font-size",$(this).val()+"px");

});

$(".name,.address,.address1").click(function(){
var id = this.id;
current_id = id;
$("#"+id).css('font-size', $('#size').val()+"px");
});

$(".name,.address,.address1").click(function(){

var id = this.id;//get clicked id
    current_id = id;
   $("#"+id).css('font-family', $('#fs').val());

});

小提琴： http://jsfiddle.net/tamilmani/pKyHL/

【讨论】：

【解决方案5】：

这么多工作，你为什么不做一个bbCode？会简单很多。

【讨论】：

【解决方案6】：

根据您在问题中的解释，我看到您的代码可以满足您的要求。 mohkhan 的回答是，如果您自动更改大小选择字段，则会更改 div 的字体大小。这是你所期望的吗？

还有一个更正，你已经将两个点击事件绑定到同一个 div，你可以在第一个处理程序中更改字体，如

<script type="text/javascript">
    $(".name").click(function(){
    var id = this.id;
    $("#"+id).css('font-size', $('#size').val()+"px");
    $("#"+id).css('font-family', $('#fs').val());
    });

</script>

【讨论】：

【解决方案7】：

这应该可以满足您的要求...这对我来说似乎是一个很好的解决方案：

http://jsfiddle.net/CLjZt/2/

jQuery：

$('div[data-entry=item]').click( function() {
    id = this.id;
    $('#fs').change( function(){
        $("#"+id).css('font-family', $('#fs').val());
    });
    $('#size').change( function(){
        $('#'+id).css('font-size', $('#size').val()+"px");
    });
});

HTML：

<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 data-entry="item" id="name" class="name">dsfdsfsfdsdfdsf</div> 
<div data-entry="item" id="address" class="address">sdfsdfdsfdsfdsf</div> 
<div data-entry="item" id="address1" class="address1">sdfsdfdsfdsfdsf</div>

该函数将点击事件添加到选择器div[data-entry=item]，然后将被点击元素的id记录到变量id中。然后它会触发两个函数来监听 #fs 和 #size select 元素的变化。如果检测到更改，它会使用您创建的相同选择器将 CSS 属性更改为所选 option 元素的 value。

（您可以删除此数据类型并为所有 3 个项目使用相同的 id，但我不确定您是否出于某种原因需要在元素上同时使用类和 id）

【讨论】：

【解决方案8】：

试试这个。

$('.name, .address, .address1').focus(function(){
    var fontSize = $('#size').val() + "px";
    $(this).css('font-size', fontSize);
});

如果您想先选择文本，然后在下拉菜单中选择字体时更改字体大小（而不是像我在这里一样先选择字体大小），您可以创建一个变量对于选定的文本，并设置一个事件侦听器以在焦点位于您的一个 div 时进行更新

var selectedDiv;
$('.name, .address, .address1').focus(function(){
    selectedDiv = this;
});

只要用户选择字体大小，只需创建另一个事件侦听器来更改字体。

$('#size').change(function(){
    var fontSize = $('#size').val() + "px";
    $(selectedDiv).css('font-size', fontSize);
});

【讨论】：