Question

我需要隐藏一个div，以打开一个网页（显示设置为“无”），但是单击一个按钮，必须显示div。我想知道为什么代码在向每个div声明css样式之前才起作用：如果我在顶部的样式块中定义css（如下所述），并从每个div删除样式标签，则JavaScript看起来几乎死了。 >

<!DOCTYPE html>
<HTML lang="it">
<HEAD>
<TITLE>Prova visualizzazione div via button</TITLE>
<meta charset="UTF-8" />
<script>
	function apriMenu() {
		var idTag;
		idTag = document.getElementById("appari").style;
		if (idTag.display == "none") {
			idTag.display = "block";
			idTag.top = document.getElementById("header").style.height + "px";
		} else if (idTag.display == "block") {
			idTag.display = "none";
		}
	}
</script>
<!-- <style type="text/css">
	header {
		width: 100%;
		background-color: #22ffff;
		height: 40px;
	}
	#appari {
		width: 49%;
		background-color: #ff22ff;
		height: auto;
		display: none;
	}
</style> -->
</HEAD>

<body>
<header id="header" style="width: 100%;
		background-color: #22ffff;
		height: 40px;">
	Questo è l'header<br />
	<div id="side">
		<button onClick="javascript:apriMenu();">Clicca</button>
	</div>
</header>
<div id="appari" style="width: 49%;
		background-color: #ff22ff;
		height: auto;
		display: none;">
	Questo è il div appari
</div>
</body>
</html>

Answer 1

import com.google.common.base.Function; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.support.ui.WebDriverWait; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.List; import java.util.Locale; public class BookingTest { public static void main(String[] args) throws InterruptedException { // Create a new instance of the Firefox driver // Notice that the remainder of the code relies on the interface, // not the implementation. final WebDriver driver = new ChromeDriver(); // And now use this to visit Google driver.get("https://www.booking.com/"); // wait until page will load completely new WebDriverWait(driver, 10).until( (Function<? super WebDriver, Boolean>) webDriver -> ((JavascriptExecutor) driver) .executeScript("return document.readyState").equals("complete")); // open calendar // note sometimes the xpath to the clendar button gets changed, therefore is the 'if' statement here List<WebElement> openCalButton = driver.findElements(By.xpath("//button[@aria-label= 'Open calendar']")); if (openCalButton.size() < 1){ openCalButton = driver.findElements(By.xpath("//span[@class= 'sb-date-field__icon sb-date-field__icon-btn bk-svg-wrapper calendar-restructure-sb']")); } openCalButton.get(0).click(); // store month and year Calendar cal=Calendar.getInstance(); SimpleDateFormat month_date = new SimpleDateFormat("MMMM", Locale.US); String month_name = month_date.format(cal.getTime()); String year = Calendar.getInstance().get(Calendar.YEAR) + ""; String monthYear = month_name + " " + year; // store day String day = Calendar.getInstance().get(Calendar.DAY_OF_MONTH) + ""; // find date WebElement date = driver.findElements(By.xpath("//th[contains(.,'" + monthYear + "')]/parent::*/parent::*/parent::*/tbody/tr/td/span[@class = 'c2-day-inner'][contains(.,'" + day + "')]")).get(0); date.click(); // this pause is only to prevent to exit the code immediately, if you want to see yhe result before page closes Thread.sleep(3000); driver.quit(); } }仅获得内联样式，您正在寻找的是computedStyle

因此您需要使用element.style

请参阅代码示例：

window.getComputedStyle()

function apriMenu() {
  var idTag;
  idTag = document.getElementById("appari");
  var displayStyle = window.getComputedStyle(idTag).display;

  if (displayStyle === "none") {
    idTag.style.display = "block";
    idTag.top = document.getElementById("header").style.height + "px";
  } else if (displayStyle === "block") {
    idTag.style.display = "none";
  }
}

header {
  width: 100%;
  background-color: #22ffff;
  height: 40px;
}

#appari {
  width: 49%;
  background-color: #ff22ff;
  height: auto;
  display: none;
}

Answer 2

无需太深入研究，如果style.display为空，则可以添加最终的else语句来显示元素。如果希望元素最初显示，只需使用相反的情况。

function apriMenu() {
    var idTag;
    idTag = document.getElementById("appari").style;
    if (idTag.display == "none") {
        idTag.display = "block";
        idTag.top = document.getElementById("header").style.height + "px";
    } else if (idTag.display == "block") {
        idTag.display = "none";
    }
    else{
        idTag.display = "block";
        idTag.top = document.getElementById("header").style.height + "px";
    }
}

Answer 3

这是实现同一目标的另一种简单方法：http://next.plnkr.co/edit/ZsAKiwxVA3riRx5Y?open=lib%2Fscript.js

function toggleMenu() {
   var element = document.getElementById("appari");
   element.classList.toggle("showMenu");
}

基本上，您只需要打开和关闭一个类即可隐藏/显示菜单。我发现使用类来做到这一点非常简单。

祝你好运！

通过按钮和JavaScript显示或隐藏div

3 个答案: