Thay đổi css class của một element bằng javascript

0 k thích
Làm sao để thay đổi CSS class của một element sau sự kiện onclick dùng jQuery
avatar đã hỏi ngày 5 tháng 3 bởi katy.ptit (840 điểm)  

7 Trả lời

0 k thích
Bạn có thể dùng
[code]node.className[/code]
ví dụ:
[code]document.getElementById('foo').className = 'bar';[/code]
cách này chạy ổn trên IE5.5 hoặc mới hơn theo như [url=http://quirksmode.org/dom/w3c_html.html]PPK[/url].
avatar trả lời ngày 5 tháng 3 bởi nhannguyen2989 (680 điểm)  
0 k thích
Code bằng JavaScript trên [url=http://en.wikipedia.org/wiki/ASP.NET]ASP.NET[/url]:
[code]Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub[/code]
avatar trả lời ngày 5 tháng 3 bởi dhhuy0704 (790 điểm)  
0 k thích
Cách này không dùng jquery :
[code]function hasClass(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    function addClass(ele, cls) {
        if (!this.hasClass(ele, cls)) ele.className += " " + cls;
    }
    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, ' ');
        }
    }[/code]
Để bind sự kiện onclick có thể làm như sau :
[code]<script type="text/javascript">
    function changeClass(btn, cls)
    {
      if(!hasClass(btn, cls))
      {
        addClass(btn, cls);
      }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>[/code]
Tất nhiên là dùng jQuery giờ sẽ tiện hơn
avatar trả lời ngày 5 tháng 3 bởi vntuanbk (660 điểm)  
0 k thích
chỉ cần :
[code]document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');[/code]
và nếu để bật tắt một class thì dùng :
[code]document.getElementById('id').classList.toggle('class');[/code]
avatar trả lời ngày 5 tháng 3 bởi leminhtai (830 điểm)  
0 k thích
dùng javascript thuần :
[code]function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}[/code]
avatar trả lời ngày 5 tháng 3 bởi nthngoc277 (920 điểm)  
0 k thích
Mình dùng cách này :
[code]function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}[/code]
avatar trả lời ngày 5 tháng 3 bởi Kidjp85 (380 điểm)  
0 k thích
để bind sự kiện onclick thì rất đơn giản :
[code]&lt;div class="firstClass" onclick="this.className='secondClass'">[/code]
avatar trả lời ngày 5 tháng 3 bởi brosbunbo (700 điểm)  
...