Я хотел бы использовать код, как показано ниже, в моих проектах, у меня есть 6 списков объектов для Hide and Show, мне нужно определить 6 идентификаторов ящиков? (Я хотел бы управлять этими 6 идентификаторами с помощью for loop
и Show
функцией) И содержимое окна в демо «Некоторые тексты. Некоторые тексты. Некоторые тексты». все в порядке for loop
, могу ли я отобразить полное текстовое поле Hide
? Потому что текст слишком длинный, и они выходят из экрана.
Кроме того, можно ли установить Hide
значение по умолчанию, код, как показано ниже, отобразит содержимое того, for loop
что я изменил.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box p {
width: 360px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.box p:hover {
overflow: visible;
}
</style>
</head>
<body>
<button id="statusChange">Show</button>
<div class="box" id="box">
<p>1?Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. </p>
<p>2?Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts.</p>
<p>3?Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts.</p>
<p>4?Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts.</p>
<p>5?......</p>
</div>
<script>
document.getElementById('statusChange').onclick = function() {
var text = this.innerText
if (text == 'Hide') {
document.getElementById('box').style.cssText = 'display:none'
this.innerText = 'Show'
} else if (text == 'Show') {
document.getElementById('box').style.cssText = 'display:block'
this.innerText = 'Hide'
}
}
</script>
</body>
</html>
Я хотел бы использовать код, как показано ниже, в моих проектах, у меня есть 6 списков объектов для Hide and Show, мне нужно определить 6 идентификаторов ящиков? (Я хотел бы управлять этими 6 идентификаторами с помощью for loop
и Show
функцией) И содержимое окна в демо «Некоторые тексты. Некоторые тексты. Некоторые тексты». все в порядке for loop
, могу ли я отобразить полное текстовое поле Hide
? Потому что текст слишком длинный, и они выходят из экрана.
Кроме того, можно ли установить Hide
значение по умолчанию, код, как показано ниже, отобразит содержимое того, for loop
что я изменил.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box p {
width: 360px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.box p:hover {
overflow: visible;
}
</style>
</head>
<body>
<button id="statusChange">Show</button>
<div class="box" id="box">
<p>1?Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. </p>
<p>2?Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts.</p>
<p>3?Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts.</p>
<p>4?Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts.</p>
<p>5?......</p>
</div>
<script>
document.getElementById('statusChange').onclick = function() {
var text = this.innerText
if (text == 'Hide') {
document.getElementById('box').style.cssText = 'display:none'
this.innerText = 'Show'
} else if (text == 'Show') {
document.getElementById('box').style.cssText = 'display:block'
this.innerText = 'Hide'
}
}
</script>
</body>
</html>