使用切換按鈕反轉網頁顏色

我有一整頁谷歌地圖，我想添加一個切換按鈕，以將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

使用切換按鈕反轉網頁顏色

回答

相關問題