如何使用javaScript添加css類

Question

我希望能夠在同一個網頁上打印不同的 div。 當我使用此功能時，我希望能夠使用類名 display_full 打印我的標題、段落和 div。 我不想用類名 display_short 打印 div。

 <!DOCTYPE html> <html lang="en-us"> <head> <title></title> <style type="text/css"> .display_full {display:none;} </style> </head> <body> <div> <article id="printableArea1"> <header> <h1>Heading 1</h1> <p>Some text</p> <div class="display_short">This is div 1</div> </header> <div class="display_full">This is div 2 and I want to print it</div> <input value="More" onclick="switchVisible(0, this);" type="button"> <input onclick="printDiv('printableArea1')" value="Print" type="button"> </article> <article id="printableArea2"> <header> <h1>Heading 2</h1> <p>Some text</p> <div class="display_short"><p>This is div 1</p></div> </header> <div class="display_full">This is div 2 and I want to print it</div> <input value="More" onclick="switchVisible(1, this);" type="button"> <input onclick="printDiv('printableArea2')" value="Print" type="button"> </article> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> function switchVisible(index, input) { var div1 = document.getElementsByClassName('display_short')[index]; var div2 = document.getElementsByClassName('display_full')[index]; if (div1) { if (div1.style.display == 'none') { div1.style.display = 'block'; div2.style.display = 'none'; } else { div1.style.display = 'none'; div2.style.display = 'block'; } } console.log(input); if (input.value == "More") input.value = "Less"; else input.value = "More"; } function printDiv(divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; } </script> </body> </html>

Answer 1

簡短的回答：

使用element.className = "my-class" 。

長（呃）答案：

由於class是 JavaScript 中的保留關鍵字，如果屬性名稱是保留名稱（例如element.class ），則早期版本的 JavaScript 不允許通過點運算符訪問屬性，因此該屬性稱為className 。

Answer 2

由於您已經標記了這個 jQuery，因此這里有一些關於這方面的注意事項：

添加一個類：

$('someselector').addClass('classtoadd');

切換一個類：（如果該類已經存在，則添加或刪除該類）

$('someselector').toggleClass('classtotoggle');

選擇一個班級：

$('.classtoselect').css('border','solid 1px lime');

刪除選定的類

$('someselector').removeClass('classtoremove');//remove one

// remove multiple
$('someselector').removeClass('classtoremove removethisclassalso andthisclassaswell');

$('someselector').removeClass(); // all classes removed

var hasAClass = $('someselector').hasClass('someclass');//returns true if it has the class

將.addClass()與 CSS 和媒體結合起來，你就擁有了：

CSS：

@media print{ .donotprintme { display: none; } }

代碼：

$('.display_short').addClass('donotprintme');

如何使用javaScript添加css類

問題描述

2 個解決方案

解決方案1
0 2015-11-19 17:14:12

簡短的回答：

長（呃）答案：

解決方案2
0 2015-11-24 19:26:03

如何使用javaScript添加css類

問題描述

2 個解決方案

解決方案1 0 2015-11-19 17:14:12

簡短的回答：

長（呃）答案：

解決方案2 0 2015-11-24 19:26:03

解決方案1
0 2015-11-19 17:14:12

解決方案2
0 2015-11-24 19:26:03