Javascript 使用下拉框设置CSS字体大小_Javascript_Jquery_Ajax

Javascript 使用下拉框设置CSS字体大小

javascript jquery ajax

Javascript 使用下拉框设置CSS字体大小,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在尝试将实时更新字体大小列表框添加到项目中，但我似乎无法使其正常工作我已经添加了一个HTML字体大小选择器和一些java脚本到现有的工作项目中，但运气不好，我似乎无法理解它，因为它看起来很完整，我认为它应该可以工作这是我正在使用的代码 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script&

我正在尝试将实时更新字体大小列表框添加到项目中，但我似乎无法使其正常工作

我已经添加了一个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>&nbsp;</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>

首先，确保文档中链接了jQuery库。然后，确保$this.val为您提供了正确的值。

这是我的更新答案和代码片段。问题是：顶部缺少1个，缺少2个jquery包，3个fonteselect.js和fontselect.css需要使用https://，而不是http://调用

正文{填充：50px；背景色：333；} p、 h1{color:fff；} $function{ $'font'.fontselect.changefunction{ //将+符号替换为css的空格 var font=$this.val.replace/\+/g'； //将字体拆分为族和权重 font=font.split'：'； //在段落上设置族 $'p'.css'font-family'，font[0]； }; }; $size.changefunction{ $'p'.cssfont大小，$this.val+px； }; 7. 10 20 30

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书

为了打击网络钓鱼欺诈，Chrome开始拒绝从非加密来源下载链接，你可以了解更多

因此，问题是，您下载JQuery和fontselect库的链接是通过http而不是https完成的，因此您的浏览器没有下载它们

更改：

<script src="http://ajax.googleapis.com/ajax/l...
<script src="http://www.jqueryscript.net/demo/Easy-Google-Web-F...

正文{填充：50px；背景色：333；} p、 h1{color:fff；} 7. 10 20 30

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一家不知名的印刷商将一个铅字槽拼凑成一本铅字样本书。

你不应该在第三方网站上发布代码，因为这些链接可能会随着时间的推移而消失。只需将您的代码作为代码片段发布在您的答案中，请参见我的答案以获取示例。Scott，我已经更新了代码，请参阅top post，但仍然收到一个错误：Uncaught TypeError:无法读取的addEventListener属性null@Blnukem这是因为您在加载脚本所使用的页面中的元素之前添加了标记。将标记移到代码底部，就在结束正文标记之前。@Blnukem另外，自定义代码不需要两个脚本标记。如我在回答中所示，将它们组合在一起。@Blnukem最后，您已经组合了fontselect解决方案以及我的替代解决方案，从而消除了对JQuery和fontselect的需要，这是您不应该做的。请选择我提供的解决方案之一，但不能同时选择两者。我已将您发布的原始代码放回原处。更改代码以显示您试图实现此处提供的其中一个答案，这会使您的问题和提供的答案对其他前来阅读的人毫无意义。如果您对实现其中一个建议答案有新的疑问，只需添加一条评论。

<script src="https://ajax.googleapis.com/ajax/l...
<script src="https://www.jqueryscript.net/demo/Easy-Google-Web-F...