Changing CSS Styles with javascript for a phone app

Question

I have a page that will be displayed on a phone. On the page I have a link when clicked runs a javascript script. In the script I want to hide a with the class name, content and display the with the class name, sidebar1. I put an alert in the script to show that the script runs when the link is clicked. It will come out when I get the script running. Right now the commands after the alert do not work. Can someone help? Here is my script:

<script type="text/javascript">
    function displaymenu() {
    alert("I'm the menu");
    document.className.content.style.display = 'none';
    document.className.sidebar1.style.display = '!important';
};

</script> 

Answer 1

Try something like this,

document.getElementsByClassName("myClassName").style.display = "none";
document.getElementsByClassName("sidebar1").style.cssText = 'display:inline !important';

Answer 2

如果要更新特定元素的样式，则应使用元素id：

   document.getElementById("myDIV").style.display = 'none';

Answer 3

Try using getElementsByClassName()

document.getElementsByClassName('content');

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

or with jQuery

$('.className').hide();

Answer 4

Change your code to this

<script type="text/javascript">
    function displaymenu() {
    alert("I'm the menu");
    var content = document.querySelector(".content"),
        sidebar1 = document.querySelector(".sidebar1")
    content.style.display = 'none';
    sidebar1.style.display = 'block';
};

</script>