Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2015, 22:57
Новичок на форуме
Отправить личное сообщение для xobglor Посмотреть профиль Найти все сообщения от xobglor
 
Регистрация: 17.04.2015
Сообщений: 2

Кнопка для изменения width
Добрый день всем! Скажу честно, я почти полный профан в js и буду очень рад если вы поможете мне решить маленькую, как я понимаю, задачу.
Мне нужно сделать кнопку, которая, при нажатии на нее изменяла бы (увеличивала) ширину div'а, причем, ширина - в процентах идет. Ну, и кнопка, возвращающая все к исходному состоянию не помешала бы)
Вот все, что я смог сделать:
<input value="Нажми меня" onclick="document.getElementById("ID").style.width = "150%"" type="button">
Но я понимаю, что тут все неправильно, скорее всего)
Буду рад, если Вы поможете мне.
Ответить с цитированием
  #2 (permalink)  
Старый 17.04.2015, 23:22
Кандидат Javascript-наук
Посмотреть профиль Найти все сообщения от theKingOfJava
 
Регистрация: 31.03.2015
Сообщений: 113

<html>
<head>
</head>

<body>

<div id="resizable" style="width: 10%; height: 10%; background: red"></div>
<button onclick="resize()">resize</button>
<button onclick="unResize()">unresize</button>


<script>
resize=function(){
 with(resizable.style){width="20%"; height="20%"}
}
unResize=function(){
 with(resizable.style){width="10%"; height="10%"}
}

</script>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 17.04.2015, 23:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,043

xobglor,
внутри двойных кавычек одинарные и наоборот
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
    width: 5%;
    height: 100px;
    background-color: #32CD32;
  }

  </style>
</head>

<body>
<div id="test"></div>
<input value="Нажми меня" onclick="document.getElementById('test').style.width = document.getElementById('test').style.width ? '':'150%'" type="button">
</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 18.04.2015, 17:04
Новичок на форуме
Отправить личное сообщение для xobglor Посмотреть профиль Найти все сообщения от xobglor
 
Регистрация: 17.04.2015
Сообщений: 2

Спасибо большое, знатоки!) а можно сделать так, чтобы увеличивалось при нажатии на, скажем, десять процентов. и кнопку, которая возвращала бы к исходному варианту? Я так понимаю, что js видит процентное значение как текст и функцию сложения применить не удастся? надо что-ли будет как-то преобразовывать текст в число?

хотя, конечно, можно использовать способ theKingOfJava, используя много кнопок для кадого варианта масштаба....
Ответить с цитированием
  #5 (permalink)  
Старый 18.04.2015, 17:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,043

xobglor,
изучите документацию хотя бы минимально
http://learn.javascript.ru/

храните число - число увеличивайте а в стиль пишите строку число+"%"
Ответить с цитированием
  #6 (permalink)  
Старый 18.04.2015, 18:51
Новичок на форуме
Посмотреть профиль Найти все сообщения от simply_the_Best
 
Регистрация: 18.04.2015
Сообщений: 4

<html>
<head>
<style>
 .resizable{background: red}
</style>
</head>
 
<body>
 
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>

<button id="resizeAbsolute10">absolute resize 10%</button>
<button id="resizeAbsolute20">absolute resize 20%</button>
<button id="resizeRelative10">relative resize 10%</button>
<button id="resizeRelative20">relative resize 20%</button>
<button id="default_">default</button>
 
 
<script>

defaults=[10, 20, 30]
resizables=document.querySelectorAll(".resizable")

resizeAbsolute=function(percent){
 return function(){
   [].forEach.call(resizables, function(el, i){
     with(el.style){width=(defaults[i]+percent)+"%"; height=(defaults[i]+percent)+"%"}
   })
  }
}
resizeRelative=function(percent){
 return function(){
  [].forEach.call(resizables, function(el){
    with(el.style){width=(parseInt(width)+percent)+"%"; height=(parseInt(height)+percent)+"%"}
  })
 }
}

resizeAbsolute10.onclick=resizeAbsolute(10)
resizeAbsolute20.onclick=resizeAbsolute(20)
resizeRelative10.onclick=resizeRelative(10)
resizeRelative20.onclick=resizeRelative(20)
default_.onclick=resizeAbsolute(0)
resizeAbsolute(0)()

</script>
 
</body>
</html>

Последний раз редактировалось simply_the_Best, 18.04.2015 в 19:32.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
поиск классов внутри тега yozuul jQuery 24 14.06.2013 21:00
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 08:35
Новые правила для width mycoding (X)HTML/CSS 17 20.04.2010 22:36