Как я могу изменить некоторые valeues после нажатия на этот div (я использую его как кнопку). Я хочу изменить, например, ширину и высоту до 200.Изменить div css после нажатия на него
HTML:
<div class = "sq" onclick="main.function();">
...
</div>
CSS:
.sq {
width: 102.5px;
height: 2px;
}
Это может быть выполнено с использованием только css.
button:focus {
width: 200px;
height: 200px;
}
В данном примере это ручка. http://codepen.io/doggard/pen/PzERxg
Редактировать: вы можете использовать один и тот же подход в div, добавив атрибут tabindex в div.
<div tabindex="1"></div>
Если я правильно понять, вы хотите .sq ДИВ изменить ширину и высота при нажатии?
Если это так, если вы не возражаете, используя Jquery, вы могли бы сделать что-то вроде этого:
<script>
$(document).ready(function() {
$('.sq').click(function() {
$(this).css('height','200px');
$(this).css('width','200px');
})
})
</script>
<div class="sq">
</div>
Да. У меня есть несколько кнопок, и я хочу изменить только один из них в то время, а остальные должны быть такими же, как и исходный css. Вы знаете, как это сделать? – Onez
Вышеупомянутое должно сделать это - если все они имеют класс .sq, тогда он изменит высоту и ширину только на объект, который вы нажали, и не повлияет на другие. Если вы хотите переключаться между разными ширинами и высотами, есть лучшие решения ниже, чем у меня :) – AmmyKami83
Вот один из способов сделать это:
$(function(){
$('.sq-unique').click(function(){
$('.sq-unique').toggleClass('sqClick');
});
});.sq {
border: 1px solid green;
width: 102.5px;
height: 2px;
float: left;
cursor: pointer;
}
.sq-unique {
border: 1px solid red;
width: 102.5px;
height: 2px;
float: left;
cursor: pointer;
}
.sq-unique.sqClick {
height: 200px;
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sq-unique">
</div>
<div class="sq">
</div>У меня есть несколько кнопок, и я хочу изменить только один из них в то время, а остальные должны быть такими же, как и исходный css. Вы знаете, как это сделать? – Onez
Да, я обновил класс .sq, чтобы быть уникальным .sq-уникальным классом (переименуйте его по своему усмотрению). Затем вы можете использовать его только для одного элемента или нескольких. –
$(function() {
$('.sq-click').click(function() {
$(this).toggleClass('active');
});
});.sq {
transition: all 0.25s ease;
display: inline-block;
border: 2px solid #f00;
vertical-align: top;
text-align: center;
padding: 5px 10px;
margin: 5px 10px;
cursor: pointer;
height: 20px;
width: 80px;
}
.sq-click.active {
line-height: 30px;
width: 120px;
height: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sq sq-click">Button 1</div>
<div class="sq">Button 2</div>
<div class="sq">Button 3</div>
<div class="sq">Button 4</div>У меня есть несколько кнопок, и я хочу изменить только один из них в то время, а остальные должны быть такими же, как и оригинальные css. Вы знаете, как это сделать? – Onez
@Onez Я обновил свой ответ, это то, что вы хотите? –
<div class = "sq" onclick="changeDimensions();">
Чистый JavaScript:
function changeDimensions(){
document.getElementsByClassName("sq").style.width = "200px";
document.getElementsByClassName("sq").style.height = "200px";
}
Ваш вопрос остается неясным. Что именно вы пытаетесь достичь? –
Я отредактировал сообщение. Я хочу изменить, например, ширину и высоту до 200 после нажатия на нее. У меня много кнопок, и я хочу, чтобы только активные (клики) были изменены. – Onez