0

я совсем ещё зеленый в этой теме,подскажите пожалуйста.Как реализовать кнопку подробнее через js ,я хочу сделать так: overflow: hidden; при нажатии заменить на overflow: visible;
Возможно ли это как то сделать через js?

var info=document.getElementsByClassName("button_info")
var text_info=document.getElementsByClassName("text_none")
info.onclick = function ()
{
    document.getElementByClassName('text_none').style.overflow="visible"; 
}   (Этот код не работает,возможно я неправильно обращаюсь,или же вообще так делать нельзя?)C

Есть HTML код:

<div class="button_info       ">Показать всё содержимое статьи:
</div>
<div class="text_none       "    > Текст,который будет не вмещаться  в рамки <br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
</div>  

CSS-код:

.text_none 
{
max-height: 150px;
max-width: 300px;
overflow: hidden; 
border: 1px solid black;
}             
.button_info
{
background-color:  darkcyan;
color: white;
padding: 12px 16px;
font-size: 18px;
font-weight: bold;
border: none;
cursor: pointer;
width: 120px;
}

1 ответ 1

2

Не очень понял, что это "Текст,который будет не вмещаться в рамки". Но в остальном можно использовать класс модификатор, к примеру "more". Который по кнопке будет добавлять необходимые вам стили и при повторном клике возвращать обратно. Надеюсь правильно понял вопрос.

let info=document.querySelector(".button_info")
let text_info=document.querySelector(".text_none")
info.onclick = function ()
{
   text_info.classList.toggle('more')   
} 
.text_none {
  max-height: 150px;
  max-width: 300px;
  overflow: hidden; 
  border: 1px solid black;
}         
.text_none.more {
  max-height: none;  
  overflow: visible;
  
}  

.button_info {
  background-color:  darkcyan;
  color: white;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  width: 120px;
}
<div class="button_info">Показать всё содержимое статьи:</div>
<div class="text_none">
  Текст,который будет не вмещаться  в рамки <br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
</div>  

9
  • Мне бы на чистой жабе..
    – Dreams
    31 мар 2021 в 18:22
  • @Dreams чище некуда ) 31 мар 2021 в 18:23
  • а это разве не jquery?
    – Dreams
    31 мар 2021 в 18:24
  • @Dreams нет, тру ванилла ) А что вас смутило? 31 мар 2021 в 18:24
  • понял,спасибо!буду сейчас разбираться!
    – Dreams
    31 мар 2021 в 18:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.