调整jquery中选定文本的字体大小

问题描述：

我想调整文本的大小div。我知道JavaScript代码，但这里我想要的只是调整div的font-size的大小或当前用户选择div 。调整jquery中选定文本的字体大小

$("#slider").on("change",function(){ 
 
    var v=$(this).val(); 
 
    $('.text').css('font-size', v + 'px'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" min="12" max="120" id="slider" /> 
 
<div class="text" contenteditable="true" style="cursor:grab;">hello</div> 
 
<div class="text text1" contenteditable="true" style="cursor:grab;">hello</div> 
 
<div class="text text2" contenteditable="true" style="cursor:grab;">hello</div> 
 
<div class="text text3" contenteditable="true" style="cursor:grab;">hello</div>

如何做到这一点？

答

这段代码添加到您的脚本标签

$('.text').on('focus',function(){ 
    $('.text').removeClass('active'); 
    $(this).addClass('active'); 
})

和更改滑块的onChange功能，这

$("#slider").on("change",function(){ 
    var v=$(this).val(); 
    $('.text.active').css('font-size', v + 'px'); 
});

在这里你可以看到它是如何工作的： https://jsfiddle.net/Lwy4oge8/

Thanku。它正在工作。 – Nithin

不客气:) –

请你检查这太http://stackoverflow.com/questions/40191439/click-event-is-not-working-in-contenteditable-div – Nithin

答

我不熟悉与jQuery。这里是一个工作的JavaScript代码。

  var focused = null;[].map.call(document.querySelectorAll(".text"), 
    function (x) { 
     x.onfocus = function() { focused = this;}; 
    }); 
    document.querySelector("#slider").onchange = function() { 
     focused != null ? focused.style.fontSize = this.value + "px" : true;;

答

可以使用

enter code here 
<html> 
    <div class='text'/> 
<script> 

fontx=documnet.findElementById('slider').value 
documnet.findElementByClassNmae('text').style.font-size=fontx 
</script>

调整jquery中选定文本的字体大小

相关推荐