如何更改字體大小後選擇文本只在該格

我正在使用下面的代碼來更改<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

如何更改字體大小後選擇文本只在該格

回答

相關問題