[英]Set CSS Font Size With Drop Box
我正在尝试将实时更新字体大小列表框添加到项目中，但似乎无法正常工作。
我在现有的工作项目中添加了HTML字体大小选择器和一些Java脚本，但是没有运气，我似乎无法弄清楚，因为它对我来说看起来很完整，我认为它应该可以工作。
这是我正在使用的代码。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/fontselect.css" />
<script src="http://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/jquery.fontselect.js"></script>
<style>
body { padding:50px; background-color:#333;}
p, h1 { color:#fff;}
</style>
</head>
<body>
<script>
$(function(){
$('#font').fontselect().change(function(){
// replace + signs with spaces for css
var font = $(this).val().replace(/\+/g, ' ');
// split font into family and weight
font = font.split(':');
// set family on paragraphs
$('p').css('font-family', font[0]);
});
});
</script>
<script>
$("#size").change(function() {
$('p').css("font-size", $(this).val() + "px");
});
</script>
<p> </p>
<input id="font" type="text" />
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.</p>
</body>
</html>
这是我用代码片段更新的答案。 问题是：1）顶部缺少<html><head> ，2）缺少jquery程序包，3）需要使用https：//而不是http：//来调用fonteselect.js和fontselect.css。
<html> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/fontselect.css" /> <script src="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/jquery.fontselect.js"></script> <style> body { padding:50px; background-color:#333;} p, h1 { color:#fff;} </style> </head> <body> <script> $(function(){ $('#font').fontselect().change(function(){ // replace + signs with spaces for css var font = $(this).val().replace(/\\+/g, ' '); // split font into family and weight font = font.split(':'); // set family on paragraphs $('p').css('font-family', font[0]); }); }); </script> <script> $("#size").change(function() { $('p').css("font-size", $(this).val() + "px"); }); </script> <select id="size"> <option value="7">7</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> </select> <p> </p> <input id="font" type="text" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </body> </html>
Chrome浏览器开始拒绝从非加密来源下载链接，以打击网络钓鱼欺诈，您可以在此处了解更多信息。
因此，问题在于，用于下载JQuery和fontselect库的<script>链接是通过http而不是https完成的 ，因此您的浏览器没有下载它们。
更改：
<script src="http://ajax.googleapis.com/ajax/l...
<script src="http://www.jqueryscript.net/demo/Easy-Google-Web-F...
至：
<script src="https://ajax.googleapis.com/ajax/l...
<script src="https://www.jqueryscript.net/demo/Easy-Google-Web-F...
$(function(){ $('#font').fontselect().change(function(){ // replace + signs with spaces for css var font = $(this).val().replace(/\\+/g, ' '); // split font into family and weight font = font.split(':'); // set family on paragraphs $('p').css('font-family', font[0]); }); }); $("#size").change(function() { $('p').css("font-size", $(this).val() + "px"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/jquery.fontselect.js"></script> <link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/fontselect.css"> <style> body { padding:50px; background-color:#333;} p, h1 { color:#fff;} </style> <select id="size"> <option value="7">7</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> </select> <p> </p> <input id="font" type="text" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
// First, get a reference to the drop down and the target element var dd = document.getElementById("size"); var target = document.querySelector("p"); // Then, set up an event handling function for when the value of the select changes dd.addEventListener("change", function(){ // Remove the previously applied class target.className = ""; // Just apply the CSS class that corresponds to the size selected target.classList.add(dd.value); });
body { padding:50px; background-color:#333;} p, h1 { color:#fff;} /* CSS class names must start with a letter */ .seven { font-size:7px; } .ten { font-size:10px; } .twenty { font-size:20px; } .thirty { font-size:30px; }
<select id="size"> <option value="">Choose a font size...</option> <!-- The values here must match the names of the CSS classes --> <option value="seven">7</option> <option value="ten">10</option> <option value="twenty">20</option> <option value="thirty">30</option> </select> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
首先，请确保您的文档中链接了jQuery库。 然后，确保$(this).val()给您正确的值。
如何设置Kendo组合框中输入（而不是下拉菜单）中显示的文本的字体大小？
[英]How to set the font size of the text shown in input (not in drop down) for the combo box in Kendo?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.