單擊它後更改div css

如何在單擊此div後更改一些價格（我將它用作按鈕）。我想例如寬度和高度改爲200單擊它後更改div css

HTML：

<div class = "sq" onclick="main.function();"> 
... 
</div>

CSS：

.sq { 
    width: 102.5px; 
    height: 2px; 
}

來源

2016-07-15 Onez

你的問題還不清楚。你究竟想要完成什麼？ –

我編輯過的文章。點擊它後，我想將寬度和高度更改爲200。我有很多按鈕，我只希望改變主動（點擊）。 – Onez

這可以使用CSS來完成。

button:focus { 
    width: 200px; 
    height: 200px; 
}

這是一個筆爲例。 http://codepen.io/doggard/pen/PzERxg

編輯：您可以通過在div上添加tabindex屬性來在div上使用相同的方法。

<div tabindex="1"></div>

來源

2016-07-15 15:12:59 Dylan

如果我理解正確的話，你想.sq div來改變寬度和點擊時的高度？

如果是這樣，如果你不介意使用jQuery，你可以做這樣的事情：

<script> 
    $(document).ready(function() { 
     $('.sq').click(function() { 
      $(this).css('height','200px'); 
      $(this).css('width','200px');  
     })  
    }) 
</script> 
<div class="sq"> 

</div>

來源

2016-07-15 14:49:34 AmmyKami83

是的。我有幾個按鈕，我想在當時只更改其中的一個，其餘的應該與原始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"> 
 
&nbsp; 
 
</div> 
 

 
<div class="sq"> 
 
&nbsp; 
 
</div>

來源

2016-07-15 14:56:01

我有幾個按鈕，我只想改變其中的一個，其餘的應該與原來的CSS相同。你知道怎麼做嗎？ – Onez

是的，我已將.sq類更新爲獨特的.sq-unique類（將其重命名爲您認爲合適的）。然後你可以在一個元素或多個元素上使用它。 –

$(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>

來源

2016-07-15 15:04:44

我有幾個按鈕，我只想改變其中的一個，其餘的應該與原始CSS相同。你知道怎麼做嗎？ – Onez

@Onez我已經更新了我的答案，這是你想要的嗎？ –

<div class = "sq" onclick="changeDimensions();">

純JavaScript：

function changeDimensions(){ 
    document.getElementsByClassName("sq").style.width = "200px"; 
    document.getElementsByClassName("sq").style.height = "200px"; 
}

來源

2016-07-15 15:33:12 Bagata

單擊它後更改div css

回答

相關問題