Question

提前感谢您的帮助！

我有一整页谷歌地图，我想添加一个切换按钮，以适应webkit反转CSS样式。问题是，我不知道如何实现这一点。

我不想将-webkit-filter: invert(100%);应用于图像，而是希望使用切换按钮将其应用于整个页面。

任何方向都会非常感谢！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Intel Navigation</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/main.css" rel="stylesheet">
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
</head>
<body>
<div id="google_canvas"></div>
<script>
   (function() {

    if(!!navigator.geolocation) {

     var map;

    var mapOptions = {
     zoom: 15,
     mapTypeId: google.maps.MapTypeId.TERRAIN,
     mapTypeControl: true,
     mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  },
     zoomControl: true,
  zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
  }
}
    };

    map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);

     navigator.geolocation.watchPosition(function(position) {

     var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var image = 'images/current.png';

     var marker = new google.maps.Marker({
     map: map,
     icon: image,
     position: geolocate
     });

     map.setCenter(geolocate);

     });

     layer = new google.maps.FusionTablesLayer({
     query: {
         select: '\'Lat\'',
         from: 'xxxxxx'
     }
});
     layer.setMap(map);
     }      
   )();
   </script>
</body>
</html>

Answer 1

您只需在<html>元素上设置该过滤器：

document.documentElement.style.webkitFilter = 'invert(100%)';

screenshot

您可能希望为便携性添加更多供应商前缀：

var docEl = document.documentElement;
docEl.style.filter || docEl.style.webkitFilter ||
  docEl.style.mozFilter || docEl.style.msFilter ||
  docEl.style.oFilter = 'invert(100%)';

Answer 2

如何使用jquery并循环遍历所有元素？

$("body").each($(this).css());

使用切换按钮反转网页颜色

2 个答案: