Question

您好
在JavaScript中，我如何执行与下面的代码（PHP）相同的功能？

<?php 
if (strpos($_SERVER["HTTP_USER_AGENT"], 'Chrome') == true) {
  echo "<style>h1 { color: red; }</style>";
}
?>

Answer 1

使用Modernizr脚本为您执行功能检测，然后修改CSS代码以利用添加的类。

Answer 2

if ( navigator.userAgent.indexOf('Chrome') > -1 )
   document.write("<style type=\"text/css\">h1 { color: red; }</style>");

另一种变体，更短

navigator.userAgent.indexOf('Chrome') > -1 ?
       document.write("<style type=\"text/css\">h1 { color: red; }</style>") : "";

Answer 3

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

if (is_chrome) {
  document.writeln("<style>h1 { color: red; }</style>");
}

Chrome检测来源： http://davidwalsh.name/detecting-google-chrome-javascript

您可能需要使用javascript进行不同的浏览器检测： http://javascriptly.com/2008/09/javascript-to-detect-google-chrome/

Answer 4

在智能手机浏览器上，由于不同版本的浏览器与javascript / css的行为不同，因此情况有点复杂。例如，android浏览器不支持html5直到android os 2.0，在后来的os版本中它支持html5视频标签但不支持音频标签。同样，移动游猎也有变化。因此，最好的方法是查看用户代理字符串并解析它的os版本/ platform / os并采取相应的行动。我写了一个小函数来从浏览器用户代理中检索一些信息。

var agentInfo=(function(){
  var info={}, 
  ua=navigator.userAgent.split(/[()]/)[1].split(/;/);
  info.platform=ua[0] && ua[0].toLowerCase();
  info.version=ua[2] && ua[2].match(/[0-9._]+/g)[0];
  info.os=ua[2] && (temp=ua[2].match(/[^0-9_.]+/g)[0].toLowerCase()) && (temp=/(windows)|(linux)|(mac)|(iphone)|(android)/.exec(temp)) && temp[0];
  return info;
})();

现在基于os / platform / version，你可以编写适当的css。

JavaScript - 从javascript调用css文件/ css代码

4 个答案: