let
body = document.querySelector( 'body' ),
one = document.getElementById( 'one' ),
three = document.getElementById( 'three' );
function colorBackground() {
body.style.backgroundColor = '#0bb';
}
function removeBackground() {
body.style.backgroundColor = '#eee';
}
one
.addEventListener( 'mouseover', colorBackground );
one
.addEventListener( 'mouseout', removeBackground );
three
.addEventListener( 'mouseover', colorBackground );
three
.addEventListener( 'mouseout', removeBackground );html, body, nav, div {
margin: 0;
height: 100%; width: 100%;
}
html, div {
font-family: Arial;
background-color: #eee; color: #444;
user-select: none;
}
body {
filter: brightness( 103.75% );
font-size:1.5rem;
}
nav, div {
display: flex; flex-direction: column;
}
div {
outline: 1px solid #ddd; cursor: pointer;
}
div:hover {
background-color: #0bb; color: #eee;
}
div:active {
filter: brightness( 0% );
}
p {
margin: auto; text-transform: uppercase;
}
@media( orientation: landscape ) {
nav, div {
flex-direction: row;
}
}<!DOCTYPE html>
<html lang='us-EN' ontouchstart>
<head>
<meta charset='UTF-8'>
<meta
name='viewport'
content='width=device-width, initial-scale=1.0'
>
<link rel='stylesheet' href='css/base.css'>
<title>trifold</title>
</head>
<body>
<nav>
<div id='one'>
<p>one</p>
</div>
<div id='two'>
<p>two</p>
</div>
<div id='three'>
<p>three</p>
</div>
</nav>
<script src='js/origin.js'></script>
</body>
</html>当点击/悬停“一”或“三”时，正文背景颜色会发生变化以匹配。当按钮缩小并且不拉伸(stretch)整个页面的空间时，更容易看到这种效果的发生。在下面的第二个代码片段中查看此效果的示例:
(将鼠标悬停在“一”或“三”上并注意背景变化):
let
body = document.querySelector( 'body' ),
one = document.getElementById( 'one' ),
three = document.getElementById( 'three' );
function colorBackground() {
body.style.backgroundColor = '#0bb';
}
function removeBackground() {
body.style.backgroundColor = '#eee';
}
one
.addEventListener( 'mouseover', colorBackground );
one
.addEventListener( 'mouseout', removeBackground );
three
.addEventListener( 'mouseover', colorBackground );
three
.addEventListener( 'mouseout', removeBackground );html, body, nav, div {
margin: 0;
height: 100%; width: 100%;
}
html, div {
font-family: Arial;
background-color: #eee; color: #444;
user-select: none;
}
body {
filter: brightness( 103.75% );
font-size:1.5rem;
}
nav, div {
display: flex; flex-direction: column; transform: scale( 0.9 ); /*added transform*/
}
div {
outline: 1px solid #ddd; cursor: pointer;
}
div:hover {
background-color: #0bb; color: #eee;
}
div:active {
filter: brightness( 0% );
}
p {
margin: auto; text-transform: uppercase;
}
@media( orientation: landscape ) {
nav, div {
flex-direction: row;
}
}<!DOCTYPE html>
<html lang='us-EN' ontouchstart>
<head>
<meta charset='UTF-8'>
<meta
name='viewport'
content='width=device-width, initial-scale=1.0'
>
<link rel='stylesheet' href='css/base.css'>
<title>trifold</title>
</head>
<body>
<nav>
<div id='one'>
<p>one</p>
</div>
<div id='two'>
<p>two</p>
</div>
<div id='three'>
<p>three</p>
</div>
</nav>
<script src='js/origin.js'></script>
</body>
</html>特别是在 iPhone 上的 IOS 中，此行为在屏幕的状态栏区域内不起作用。当点击三个按钮之一时，iPhone 上的状态栏背景颜色不会改变。
使用 javaScript 我强制更改网站背景颜色。
one
.addEventListener( 'mouseover', colorBackground );
one
.addEventListener( 'mouseout', removeBackground );
但是，当 'one' 按钮按下时，iOS 状态栏(带有电池和 5G 信号图标的 gif 的最顶部)仍保持原始的 #eee 背景颜色已点击。
链接到 iPhone 测试的实时网站:https://user-railcoil.github.io/so/statusbar
目标:有没有办法使用 vanilla JS 强制 iPhone 上的状态栏颜色随背景的其余部分一起更新？
下面是在 iPhone 上点击顶部 div/按钮时所需结果的图像(请注意状态栏背景颜色已更改为蓝色)。
编辑:更奇怪的是，iOS 上状态栏背景的颜色确实发生变化，但只有在点击按钮并且手机旋转到之后的横向模式。旋转屏幕似乎会强制颜色立即更新。
最佳答案
一种解决方案是设置 theme-color在 meta 上使用 JavaScript标签。
<meta name="theme-color" content='#0dd'>
function colorBackground() {
html.style.display = 'none';
html.style.display = 'block';
body.style.backgroundColor = '#0bb';
head.innerHTML =
`
<meta charset='UTF-8'>
<meta
name='viewport'
content='width=device-width, initial-scale=1.0'
>
<meta name="theme-color" content="#0bb">
<link rel='stylesheet' href='css/base.css'>
<title>trifold</title>
`;
}
function removeBackground() {
html.style.display = 'none';
html.style.display = 'block';
body.style.backgroundColor = '#eee';
head.innerHTML =
`
<meta charset='UTF-8'>
<meta
name='viewport'
content='width=device-width, initial-scale=1.0'
>
<meta name="theme-color" content="#eee">
<link rel='stylesheet' href='css/base.css'>
<title>trifold</title>
`;
}html, body, nav, div {
margin: 0;
height: 100%; width: 100%;
}
html, div {
font-family: Arial;
background-color: #eee; color: #444;
user-select: none;
}
body {
filter: brightness( 103.75% );
font-size:1.5rem;
}
nav, div {
display: flex; flex-direction: column;
}
div {
outline: 1px solid #ddd; cursor: pointer;
}
div:hover {
background-color: #0bb; color: #eee;
}
div:active {
filter: brightness( 0% );
}
p {
margin: auto; text-transform: uppercase;
}
@media( orientation: landscape ) {
nav, div {
flex-direction: row;
}
}<!DOCTYPE html>
<html lang='us-EN' ontouchstart>
<head>
<meta charset='UTF-8'>
<meta
name='viewport'
content='width=device-width, initial-scale=1.0'
>
<link rel='stylesheet' href='css/base.css'>
<title>trifold</title>
</head>
<body>
<nav>
<div id='one'>
<p>one</p>
</div>
<div id='two'>
<p>two</p>
</div>
<div id='three'>
<p>three</p>
</div>
</nav>
<script src='js/origin.js'></script>
</body>
</html>关于javascript - 如何在web应用程序中动态更改ios状态栏的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74197660/