Question

我有2个div，有两个不同的id;

mainid
INFOID

当我在#infoid上删除#mainid div innerHTML文本并显示第一个div时，我需要这样做。

完整代码

function myFunction() {

    var x = document.getElementById("dom").id;


	    document.getElementById("info").innerHTML = x;


 
	
}

html, body {height:100%;
margin:0;
padding:0;}



h2, h3 {
	margin:0px;
	text-align:center;
	padding-top:25px;
}


.cc:nth-child(odd) .first-line {background-color: #CCC;
color:red;}
p {text-align:center;
margin:0;
padding:5px;
color:#fff;}

.box5 {text-align:center;
}
.box5 .first-line {
	padding:0px;
	margin:0px;
}
.box5 .second-line {
	padding:0px;
	margin:0px;
}
.box5 img {
	padding-top:3px;
	padding-bottom:3px;
	padding-right:10px;
	padding-left:10px;
	margin:5px;
	border: 3px solid #0B0B3B;
	outline:3px solid #F4FA58;
	display:inline-block;
	
	
}

.imgs {width:50px;height:50px;}

@media screen and (min-width: 769px){
	.box1 {height:50%;
	width:30%;
	float:left;
	background-color:#81DAF5;}
		.box2 {height:10%;
	width:70%;
	float:right;
	background-color:#81F781;}
			.box3 {height:20%;
	width:15%;
	float:left;
	background-color:#5858FA;}
	.box4 {height:20%;
	width:55%;
	float:right;
	background-color:#F4FA58;}
	.box5 {height:20%;
	width:70%;
	float:right;
	background-color:#FAAC58;}
	.box6 {height:40%;
	width:15%;
	float:left;
	background-color:#A0522D;}
	.box7 {height:40%;
	width:35%;
	float:left;
	background-color:#FA5858;}
	.box8 {height:40%;
	width:50%;
	float:right;
	background-color:#fff;}
	.box9 {height:10%;
	width:100%;
	float:left;
	background-color:#000;}
}



@media screen and (max-width: 768px) {
	.box2:hover  {
  animation-name:scale;
  -webkit-animation-name: scale; 
  -webkit-animation: scale 0.5s linear infinite;
    -webkit-animation-duration: 0.5s; 
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in; 
    transition: all 0.5s ease-in; 
}
	@-webkit-keyframes scale {
    from {
   
    
       webkit-transform:scale(1)
    }
    to { 
    webkit-transform:scale(0);
	webkit-background-color:red;
    }
}

@keyframes scale {
	
	
    from {
      
    transform:scale(1)
    }
    to { 
   
  transform:scale(0);
  background-color:red;
    }
}

.box5:hover  {
  animation-name:rotate;
  -webkit-animation-name: rotate; 
  -webkit-animation: rotate 0.5s linear infinite;
    -webkit-animation-duration: 0.5s; 
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in; 
    transition: all 0.5s ease-in; 
}
	@-webkit-keyframes rotate{
    from {
   
    
       webkit-transform:rotatex(0deg);
    }
    to { 
    webkit-transform:rotatex(360deg);
	
    }
}

@keyframes rotate {
	
	
    from {
      
    transform:rotatex(0deg);
    }
    to { 
   
  transform:rotatex(360deg);
    }
}



.box3 h3  {
  animation-name:scaletext;
  -webkit-animation-name: scaletext; 
  -webkit-animation: scaletext 0.5s linear infinite;
    -webkit-animation-duration: 0.5s; 
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in; 
    transition: all 0.5s ease-in; 
	  -webkit-animation-delay: 3s; 
    animation-delay: 3s;
}
	@-webkit-keyframes scaletext{
    from {
      0%   {webkit-font-size:12px;}
    25%  {webkit-font-size:8px;}
    50%  {webkit-font-size:16px;}
    100% {webkit-font-size:11px;}
    }
    
}

@keyframes scaletext {
	
	   0%   {font-size:12px;}
    25%  {font-size:8px;}
    50%  {font-size:16px;}
    100% {font-size:11px;}
}
	
	.box1 {height:50%;
	width:50%;
	float:left;
	background-color:#81DAF5;}
	.box2 {height:10%;
	width:50%;
	float:right;
	background-color:#81F781;}
	.box3 {height:20%;
	width:50%;
	float:left;
	background-color:#5858FA;}
	.box4 {
	display:none;
	height:0px;
	width:0px;}
	.box5 {height:20%;
	width:50%;
	float:right;
	background-color:#FAAC58;}
	.box6 {display:none;}
	.box7 {height:40%;
	width:20%;
	float:left;
	background-color:#FA5858;}
	.box8 {height:40%;
	width:80%;
	float:right;
	background-color:#fff;}
	.box9 {height:10%;
	width:100%;
	float:left;
	background-color:#000;}
}

<div class="box1 cc" id="info">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box2 cc">
<h3 class="first-line">Pirma eilutė</h2>
</div>

<div class="box3 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box4 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box5 cc">
<img class="imgs">
<img class="imgs">
<img class="imgs">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>

</div>

<div class="box6 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box7 cc"  id="dom" onmouseout='myFunction()'>
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box8 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="first-line">Antra eilutė</h3>
</div>

<div class="box9 cc">
<h3 style="color:#fff;" class="first-line">Pirma eilutė</h2>

问题在于，如果没有id，我就无法创建。

Maby有人可以帮助我在这个javascript中制作if else语句吗？

如果得到div {code} 否则{写：没有id}

Answer 1

function mouseOutFunc(element) {
  document.getElementById('info').innerHTML = element.id || "No Id";
}

<div id="info"></div>
<div id="div1" onmouseout="mouseOutFunc(this)">ONE</div>
<div id="div2" onmouseout="mouseOutFunc(this)">TWO</div>
<div onmouseout="mouseOutFunc(this)">NO ID</div>

试试这个

Javascript mouseout如果得到id显示，如果没有写“no id”

1 个答案: