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

Question

我在 Google Chrome 中使用 Inspect Element 来确定是什么控制了此模板网站幻灯片下方的幻灯片控制器按钮的大小：

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

当我单击“心脏病学”按钮上的检查元素时，我在 HTML 代码中看到一行：

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

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

请帮忙！谢谢！

Answer 1

“源代码”是浏览器从服务器接收到的内容。可以通过 JavaScript 更改； “检查元素”始终显示文档的当前形状。

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

<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。