(感谢Christoph在How to create a<style>tag with Javascript for the JS pattern
我正在visualstudio中使用XHTML编写一个电子商务网站。在建立联系页面的时候，我正在使用谷歌API，以便能够在交互式地图中显示商店的位置。我的问题是：
- 如果用户在浏览器中禁用了JS，我如何在不使用非脚本标记的情况下显示该位置的静态图像
到目前为止，我在body标签中的其他几个元素中都有这个，只是为了让问题更容易理解：
<noscript><img src="map.png" class="map_location" /></noscript>
<div id=map></div>
它与Javascript文件交互
function initMap() {
var wannabemarker = { lat: 53.273301, lng: -2.817487 };
var map = new google.maps.Map(document.getElementById('map'), {
center: wannabemarker,
zoom: 12
});
var marker = new google.maps.Marker({
position: wannabemarker,
map: map
});
}
这个地图在JS打开的情况下运行得很好，静态图像显示JS是否关闭，但出现了验证错误，我不得不让它消失。如有任何帮助，我们将不胜感激。
谢谢
首先要注意的是，您显然并没有真正使用XHTML，因为<div id=map>中未加引号的属性会破坏浏览器中的页面。因此，实际上您使用的是普通的HTML，但可能认为您使用XHTML是因为您有XHTML文档类型。
因此，最好的建议就是停止这样做。使用<!DOCTYPE html>，就可以不用担心<noscript>在XHTML中无效。
现在，在XHTML中，如果使用正确，无效的<noscript>元素没有任何作用，但如果启用JS，则默认样式为display: none，如果禁用JS，则为display:inline。请注意，在任何一种情况下，所包含的img都将从服务器中提取，而如果您使用普通HTML，则如果启用JS，则不会提取img。
因此，在XHTML中，您可以执行类似的操作
<script>
(function(){
var css = '.noscript { display:none }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
})();
</script>
<span class="noscript"><img src="map.png" class="map_location" alt="map" /></span>
并在XHTML5有效的情况下获得与XHTML中的CCD_ 7相同的效果。
(感谢Christoph在How to create a<style>tag with Javascript for the JS pattern