Question

这个JS的新东西有点新，所以我希望有人帮我做下面的事情

我想添加适当的JavaScript事件处理程序，以便当用户点击“fontControl”中的任何A时，所有文章的字体大小都会调整为0.8em，1.0em和1.3em。
此外，所选A的颜色应设为蓝色，其他两个A的颜色为灰色。
当鼠标光标悬停在任何A上时，该A的背景颜色应变为白色。

如果有人能帮助我，我将不胜感激。谢谢，干杯。

＆＃13;

<script>
function init()
{

    document.getElementById('small').onclick = function()
    {
        document.getElementById('content').style.fontSize = "0.8em";

    }
    document.getElementById('medium').onclick = function()
    {
        document.getElementById('content').style.fontSize = "1.0em"
        
    }
    document.getElementById('large').onclick = function()
    {
        document.getElementById('content').style.fontSize = "1.3em"
        
    }
    
}

window.onload=init;
</script>

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Articles</title>

<style>
* {
    margin: 0;
	box-sizing: border-box;
}
body {
    font: 1em Verdana, sans-serif;
    background-color: antiquewhite;
}
h2, h4 {
    text-align: center;
}

#header {
    border-bottom: 2px solid black;
    font-size: 2.5em;
    padding: 0.5em 0;
    height: 100px;
}
#footer {
    border-top: 2px solid black;
    padding: 1em 0;
}
#header, #footer {
    text-align: center;
    background-color: #CCC;
}
#leftnav, #rightnav {
    position: absolute;
    top: 100px;
    width: 20%;
    padding-top: 3em;
}

#rightnav{ 
    left: 80%;
}
#wrapper {
    background-color: dodgerblue;    overflow: hidden;
}
#content div {
    border: 1px solid black;
    border-radius: 10px;
    padding: 0.5em;
    margin-bottom: 10px;
    background-color: #ccc;
}
#content div:last-child {
    margin-bottom: 0px;
}
    
#content div:hover {
    border-color: dodgerblue;
    background-color: white;
}
    
#content {
    padding: 0.5em;
    margin: 0 20%;
	border-left: 2px solid black;
    border-right: 2px solid black;
    background-color: white;
}

/* ---------------------------------------------------------*/
span {
    color: #777;
    padding: 0px 5px;
    font-weight: bold;
}

#small {
    font-size: 0.8em;
}
#medium {
    font-size: 1em;
    color: dodgerblue;
}
#large {
    font-size: 1.5em;
}

#fontControl {
    float: right;
    background-color: lightblue;
}

    
    
</style>

＆＃13;

<body>
<div id="header">
    The Header
</div>

<div id="wrapper"> <!-- Can be used to apply bg colour -->

<div id="leftnav">
    <h4> Left</h4>
</div>
<div id="rightnav">
    <h4> Right</h4>
</div>
    
<div id="fontControl" >
    <span id="small">A</span>
    <span id="medium">A</span>
    <span id="large">A</span>
</div>    
    
<div id="content">
    <div>
        <h2> Article 1 </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Suspendisse ultricies condimentum velit vel scelerisque.
        </p>
    </div>
    <div>
        <h2> Article 2 </h2>
        <p>
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
    <div>
        <h2> Article 3 </h2>
        <p>
            Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
</div> <!-- end of content -->
    
</div> <!-- end of wrapper -->
    
<div id="footer">
<h3>
    The End
</h3>
</div>

</body>

＆＃13;

Answer 1

这可能不是最佳解决方案，但希望它会对您有所帮助。

此外，所选A的颜色应设置为蓝色和另外两个A的颜色为灰色。

每次单击A时都会调用此函数。

changeAColor（＆＃39;大＆＃39）;

function changeAColor(id){
    var spans = document.getElementById("fontControl").childNodes;   
   for(var i = 0; i < spans.length; i++){
        if(i % 2 != 0)
        spans[i].style.color = "grey";   
   }

   document.getElementById(id).style.color = "dodgerblue"
}

当鼠标光标悬停在任何A上时，背景颜色为 A应该变成白色。

将此添加到您的CSS

span:hover{
  background-color: white;  
}

工作示例 fiddle

Answer 2

我要做的是使用event delegation将单个事件处理程序附加到#fontControl以处理所有字体大小更改。这样可以轻松添加新的大小和方法，如果您需要更改任何只有一个处理程序而不是几个的处理程序。

此外，我不会直接改变指标的颜色，而是向他们添加和删除“选定”类。

let elContent = document.getElementById('content');
let elFontControl = document.getElementById('fontControl');

elFontControl.addEventListener('click', function (event) {
  // target is the element that was clicked on, either one of the spans
  // inside of #fontControl, or #fontControl itself
  let target = event.target;

  // we want to ignore clicks on #fontControl, so only proceed if
  // a span was clicked on
  if (target.tagName === 'SPAN') {
    // remove the selected class from the previously selected item
    elFontControl.querySelector('.selected').classList.remove('selected');

    // add the selected class to the item that was clicked
    target.classList.add('selected');
    // set the fontSize to the computed fontSize of the clicked item
    elContent.style.fontSize = window.getComputedStyle(target).fontSize;
  }
});

#small {
    font-size: 0.8em;
}
#medium {
    font-size: 1em;
}
#large {
    font-size: 1.5em;
}
#extra-large {
    font-size: 2em;
}
#extra-small {
    font-size: .5em;
}
#fontControl {
    color: grey;
    background-color: lightblue;
}

#fontControl .selected {
    color: dodgerblue;
}

<div id="fontControl" >
    <span id="extra-small">A</span>
    <span id="small">A</span>
    <span id="medium" class="selected">A</span>
    <span id="large">A</span>
    <span id="extra-large">A</span>
</div>    
    
<div id="content">
    <div>
        <h2> Article 1 </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Suspendisse ultricies condimentum velit vel scelerisque.
        </p>
    </div>
    <div>
        <h2> Article 2 </h2>
        <p>
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
    <div>
        <h2> Article 3 </h2>
        <p>
            Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
</div> <!-- end of content -->

此代码假定您单击的大小指示符包含您将更改为的实际fontSize。 getComputedStyle获取字体的有效大小。您不能只使用.style.fontSize，因为大小是通过类设置的，而不是直接使用style属性设置的。

如果指标的大小不完全相同，您可以将尺寸信息存储在data- attribute中，然后通过dataset

访问它

let elContent = document.getElementById('content');
let elFontControl = document.getElementById('fontControl');

elFontControl.addEventListener('click', function (event) {
  // target is the element that was clicked on, either one of the spans
  // inside of #fontControl, or #fontControl itself
  let target = event.target;

  // we want to ignore clicks on #fontControl, so only proceed if
  // a span was clicked on
  if (target.tagName === 'SPAN') {
    // remove the selected class from the previously selected item
    elFontControl.querySelector('.selected').classList.remove('selected');

    // add the selected class to the item that was clicked
    target.classList.add('selected');
    // set the fontSize to the computed fontSize of the cliked item
    elContent.style.fontSize = target.dataset.fontSize;
  }
});

#small {
    font-size: 0.8em;
}
#medium {
    font-size: 1em;
}
#large {
    font-size: 1.5em;
}
#extra-large {
    font-size: 2em;
}
#extra-small {
    font-size: .7em;
}
#fontControl {
    color: grey;
    background-color: lightblue;
}

#fontControl .selected {
    color: dodgerblue;
}

<div id="fontControl" >
    <span id="extra-small" data-font-size=".25em">A</span>
    <span id="small" data-font-size=".8em">A</span>
    <span id="medium" class="selected" data-font-size="1em">A</span>
    <span id="large" data-font-size="1.5em">A</span>
    <span id="extra-large" data-font-size="5em">A</span>
</div>    
    
<div id="content">
    <div>
        <h2> Article 1 </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Suspendisse ultricies condimentum velit vel scelerisque.
        </p>
    </div>
    <div>
        <h2> Article 2 </h2>
        <p>
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
    <div>
        <h2> Article 3 </h2>
        <p>
            Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
</div> <!-- end of content -->

我应该添加什么JS代码来执行以下操作？

2 个答案: