检查元素和查看源代码显示两种不同的东西

Question

我在谷歌浏览器中使用Inspect Element来确定控制此模板网站幻灯片下方幻灯片控制器按钮大小的内容：

http://themefuse.com/demo/html/Medica/index-slider-2.html

当我点击“Cardiology”按钮上的Inspect Element时，我在HTML代码中看到一行说：

<li style="width: 192px; overflow: hidden;"><a href="#" rel="1" class="">Cardiology</a></li>

然而，当我查看页面的源代码时，不存在这样的行！这对我来说是个问题，因为我想编辑按钮的大小和里面的文本。

请帮忙！谢谢！

Answer 1

“源代码”是浏览器从服务器收到的内容。它可以通过JavaScript更改; “Inspect Element”始终显示文档的当前形状。

编辑：然后，有时事情并不复杂。看看我在源代码中找到了什么：

<li>
    <div class="textHolder">
    <h3>Cardiology</h3>
    <p><span><strong><a href="#">Cardiac Rehabilitation Center</a></strong> We helped Glade Inc. design their latest fragrance for household perfumes </span></p>
    </div>
    <img src="images/temp/slider_img_01.jpg" alt="" /> 
</li>

然后由JS进一步修改。

Answer 2

这个由JS生成的列表。从第335行开始检查js/playSlider.js。