CSS
html,body{
height: 100%;
}
body{
margin: 0
}
div{
padding-left: 50px;
}
.span{
padding: 5px 15px;
background: #177ad8;
color: #fff;
font-size: 14px;
text-decoration: none;
border-radius: 7px;
cursor: pointer;
}
HTML
<div>
<p>点击下面的按钮，查看浏览器信息</p>
<span class="span">点击查看</span>
<p class="seebro"></p>
</div>
JS
var ipspan =document.querySelector(".span");
function inspect(){
var userAgent=navigator.userAgent;
// 火狐浏览器
if(userAgent.indexOf("Firefox") >-1){
return "Firefox";
}
// 谷歌浏览器
if(userAgent.indexOf("Chrome") >-1){
return "Chrome";
}
// IE
if(userAgent.indexOf("IE") >-1){
return "IE";
}
}
ipspan.onclick=function(){
document.querySelector(".seebro").innerHTML =inspect();
}
navigator 里面保留的是关于客户机浏览器的信息，不是HTML DOM对象，而是一个JavaScript对象。获取浏览器的字符串，比如google浏览器，那么这个值就是以Chrome开头，Safari浏览器返回的userAgent信息里就包括字符串“Safari”