如何更改字体大小后选择文本只在该格

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

来源

2013-06-28 user2528279

做到这一点，看看..

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

来源

2013-06-28 11:22:19 mohkhan

有没有能力，如果所选文本抓事件，但你可以使用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一下：感谢减去。更新答案

来源

2013-06-28 11:26:10 Sergio

它的工作原理，我投了票。 –

谢谢你的回答。但它不符合我的要求。仅在选择文本后应该更改字体大小。即首先我们必须选择文本，然后在下拉列表中选择字体大小，然后只更改该div的字体大小。 – user2528279

从你在你的问题已经解释了，我看到你的代码，你想要做什么。通过mohkhan回答是，如果您自动更改大小选择字段的div的字体大小将被更改。这是你所期望的吗？

而且另外一个修正，你已经绑定两个click事件到同一个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>

来源

2013-06-28 11:44:29 SpreeTheGr8

从你的问题，我相信你想改变文字大小以及点击时的字体，同时您希望在更改大小或字体的下拉值后更改大小和字体。

你可以试试下面的代码来实现这一目标。

的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/

来源

2013-06-28 12:01:21 tamilmani

这么多工作，你为什么不只是做一个的bbcode？这会更简单。

来源

2013-06-28 12:02:28

这对你的工作

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

首先你罐从下拉式的字体大小，然后专注于DIV jQuery的获得从下拉菜单元素的尺寸和改变divfont以及

来源

2013-06-29 14:55:36

这应该做你在问什么这似乎是一个很好的解决方案对我说：

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>

的功能增加了一个click事件到选择DIV [数据 - entry = item]，然后将被点击的元素的id记录到变量id。然后它触发两个功能，它们监听#fs 和 #size选择元素的更改。如果检测到更改，它会使用您创建的相同选择器来将对css属性的更改设置为所选选项元素的值。

（你可以删除这些数据类型，并使用相同ID的所有3个项目，但我不是肯定的，如果你需要在你的元素出于某种原因既class和id的）

来源

2013-10-11 21:00:04 TrevasaurusRex

试试这个。

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

来源

2013-11-12 22:45:24 manwill

如何更改字体大小后选择文本只在该格

回答

相关问题