如何通过 onClick() javascript 查看特定 html 标签的源代码而不显示其 css？答案

【问题标题】：How to see the source code of a particular html tag by onClick() javascript without showing its css?如何通过 onClick() javascript 查看特定 html 标签的源代码而不显示其 css？
【发布时间】：2011-09-26 07:20:40
【问题描述】：

大家好，这里我试图通过 onclick 显示特定 div 的源代码

javascript 函数。但是得到的结果是，当我点击 div 时，我看到了

整个源代码虽然我试图只获取一个 div 的特定源代码

显示。任何人都请强调我在这里做错了什么..！以及如何制作

它以预期的方式工作。

  <html>
    <head>
        <title></title>
    <script type="text/javascript">
    function viewsource(){
       var oldHTML = document.getElementById('para').innerHTML;
       var newHTML = "" + oldHTML + "";
       var newHTML = newHTML.replace(/</g,"&lt;");
       var newHTML = newHTML.replace(/>/g,"&gt;");
       var newHTML = newHTML.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
        document.getElementById('para').innerHTML = newHTML;
    }
    </script>

    </head>

    <body>
    <p id='para'><strong>This is my <span style="border: 1px solid #ccc;">test text</span> to check if it works</strong></p> 
    <input type='button' onclick='viewsource()' value='View Source'/>
    </body>
    </html>

补充说明：

在上面的代码中，当按钮被点击时，id 为 para 的段落标签会显示出来……但它也显示了它的 css。我只想显示没有css样式属性的html标签。

我不想要使用 innerHTML 的内容，但我想要包括 div id 在内的整个 div。（例如）<div id='softros'><img src='/images/bgrade.jpg' /></div>

【问题讨论】：

在我进行更改时编辑了代码，现在代码将显示 html 标签，但带有 css 样式。我想显示没有 css 样式。谁能给我一些建议？

标签： javascript css html

【解决方案1】：

您是否考虑过只在您的 java 脚本处理程序中使用：

document.getElementById(YOUR_DIV_ID_GOES_HERE).innerHTML

【讨论】：

谢谢你的回复马克，我现在就试试你的想法..！
我试过了，但它以 html 格式显示..但我想以 viewsource 格式显示..
正如 PiTheNumber 已经说过的，你可能应该对你的 innerHTML 进行编码，这样浏览器的渲染引擎就不会识别你的 HTML 并且不会解析它

【解决方案2】：

您可以使用 .innerHTML 或 .outerHTML 获取 div 的 HTML，但您需要先对其进行编码才能显示它。否则，html 将由浏览器呈现。在 PHP 中你可以使用 htmlencode javascript 没有这个功能但是你可以使用这个htmlencode。

【讨论】：