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

我有一整页谷歌地图，我想添加一个切换按钮，以将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>

来源

2013-12-17 John Spartan

你可以简单的设置<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%)';

来源

2013-12-17 13:25:53 Doorknob

感谢您的建议@AmOs和Dorknob的雪！我该如何解决代码建议？我很抱歉，我对此很新。 –

怎么样使用jQuery和循环所有元素？

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

来源

2013-12-17 13:26:01 AmOs

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

回答

相关问题