更改网站的样式代码以允许用户更改大小和样式不起作用

Style changing code for website to allow users to change the size and style is not working

本文关键字：样式 用户 不起作用 许用户 网站 代码      更新时间：2023-09-26

我一直在为大学作业制作一个网站，我希望包含的一个功能是允许用户为 p 和 pre 标签的字体大小、字体系列、填充和对齐方式选择预设。到目前为止，我能够使用一个小下拉菜单创建一组预设选项，但我需要四个不同的选择菜单来更改每个方面 1/4 个方面，而不是一个菜单来更改所有 4 个方面。

字体系列的菜单已经制作完成，尽管它不起作用。

这是部分代码：

    <head>
    <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0
    /jquery.min.js"></SCRIPT>

所以这是在头脑中，但其余的都在这里

<center>
<select runat="server" id="select">
<option value="1" style="background-color: white;">Standard</option>
<option value="2" style="background-color: white;">Large</option>
<option value="3" style="background-color: white;">Small</option>
</select>
</center>
<script>
$('#select').change(function(){
 if($(this).val() == '1'){
 $("p, pre").css('font-size', '18px');
  } 
 if($(this).val() == '2'){

 $("p, pre").css('font-size', '26px');
  } 
    if($(this).val() == '3'){   
 $("p, pre").css('font-size', '10px');
  }
  });
 </script>
<br/>
<center>
<select runat="server" id="select">
<option value="1" style="background-color: white;">Serif</option>
<option value="2" style="background-color: white;">Sans Serif</option>
</select>
</center>
<script>
$('#select').change(function(){
  if($(this).val() == '1'){
    $("p, pre").css('font-family', 'Georgia, serif');
  } 
  if($(this).val() == '2'){
    $("p, pre").css('font-family', 'Verdana, Geneva, sans-serif');
  } 
</script>

所以我玩了很久了，但没有运气。我试过把两者放在一起，我试过把1、2、3改成不同的数字，但什么都没有。

我宁愿这种方法得到改进，而不是新的方法，尽管一个新的方法会被感激地接受。

问题 1

您正在向同一选择器（#select）调用更改函数，您应该为每个select菜单分配一个唯一的id，然后在jQuery中定位它们。

问题2

语法错误：未正确关闭更改函数 - 末尾缺少});。

问题3

请勿使用 <center> 标记，它们已弃用。您可以将元素包装在div中，并使用 CSS 对其应用text-align: center。

正确的代码演示： 

$('#selectSize').change(function() {
  if ($(this).val() == '1') {
    $("p, pre").css('font-size', '18px');
  }
  if ($(this).val() == '2') {
    $("p, pre").css('font-size', '26px');
  }
  if ($(this).val() == '3') {
    $("p, pre").css('font-size', '10px');
  }
});
$('#selectFont').change(function() {
  if ($(this).val() == '1') {
    $("p, pre").css('font-family', 'Georgia, serif');
  }
  if ($(this).val() == '2') {
    $("p, pre").css('font-family', 'Verdana, Geneva, sans-serif');
  }
});
.center {text-align: center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="center">
  <select runat="server" id="selectSize">
    <option value="1" style="background-color: white;">Standard</option>
    <option value="2" style="background-color: white;">Large</option>
    <option value="3" style="background-color: white;">Small</option>
  </select>
  <select runat="server" id="selectFont">
    <option value="1" style="background-color: white;">Serif</option>
    <option value="2" style="background-color: white;">Sans Serif</option>
  </select>
</div>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque animi soluta doloremque fuga id, porro, cupiditate ex aliquid nihil corporis consequatur libero ad repellat laboriosam voluptatum maiores accusantium nobis magni!</p>
<p>Maiores facilis ipsa consequuntur repudiandae ut esse ullam inventore nobis, cum tempora voluptatibus minus suscipit tenetur nulla dolores repellendus at molestiae, neque commodi ducimus hic? Consequuntur qui consectetur impedit fugit.</p>
<p>Sed fugiat ex omnis, consequatur accusantium, incidunt eos distinctio laborum alias quibusdam vitae labore libero nostrum est natus voluptatum harum nulla voluptatibus eveniet illum laboriosam? Distinctio sit porro harum quo.</p>

jsFiddle： https://jsfiddle.net/402wemp5/1/

附言我建议将所有JavaScript代码放在一个JS文件中，而不是放在文档中。但是，如果您选择将其保留在文档中，请将它们放在一个<script>标签中，最好放在body的底部，以确保它可以读取所有DOM元素。

首先，通过检查浏览器中的元素来检查 jquery 是否正常工作。接下来，您应该为每个部分设置不同的 id。

与其使用 $（）.css（） 更改 p 和 pre 的单一样式规则，不如使用 CSS 元素和类预定义标准、小型和大型样式。CSS 是"级联样式表"的缩写，这意味着您可以在一个类名中定义样式规则并将其应用于父元素，并使规则级联到其子元素。

例如，在 CSS 文件或内联<style>块中，您可以定义以下规则：

p, pre {
    font-size: 18px;
    font-family: Georgia, serif;
}
.small p, .small pre {
    font-size: 10px;
    font-family: Verdana, Geneva, sans-serif;
}
.large p, .large pre {
    font-size: 26px;
}

然后，您的代码可以执行以下操作：

<script>
$('#select').change(function(){
    var $sel = $(this),
        val = $sel.val(),
        $container = $('body');
    switch(val) {
        case '1':
           $container.removeClass('small').removeClass('large');
           break;
        case '2':
           $container.removeClass('small').addClass('large');
           break;
        case '3':
           $container.addClass('small').removeClass('large');
           break;
    }
});
</script>

如果要单独更改样式规则而不是分组到 1 个类中，则可以定义单独的样式以进行对齐。

相关文章：