当用户点击中间的 DIV(蓝色)时，我想使用左右 DIV 产生滑动效果。但它不起作用。
脚本代码不工作。我认为有一些错误。
当我在样式表中使用悬停时，它也不起作用。我的意思是我在 id inner/outer/power 上使用了悬停，这将左右改变 id 的 css 属性以创建滑动过渡效果。但它没有用。但是当我使用容器而不是上面的 id 来悬停时，滑动效果就起作用了。我非常沮丧，因为这对我来说没有任何意义。
<script type="text/javascript" >
function slide()
{
document.getElementById("left").style.left = -100% ;
document.getElementById("right").style.right = -100% ;
}
</script>html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>最佳答案
CSS 效果的值需要用引号引起来。
function slide()
{
document.getElementById("left").style.left = "-100%";
document.getElementById("right").style.right = "-100%" ;
}html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>附带说明一下，在代码片段中，您的 JavaScript 不需要位于脚本标记内，只要它位于 JavaScript 部分即可。
关于javascript - 无法在 DIV 上使用 JavaScript 执行 CSS 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36528707/