Is there a way to remove a property from a CSS rule?

Question

I have this problem where I am supposed to ask for user input and based on that input display an image and audio. This is what I have so far.

<!DOCTYPE html>
<html>
<head>
    <link rel = "stylesheet" href = "styles/lab8.css"/>
    <script type="text/javascript">

        function input() {
            do{
            var choice = window.prompt("Enter C for Chekov, U for Uhura, or L for Sulu", "Enter Letter");
            }
        while(choice != 'C' && choice != 'U' && choice != 'L');
        function chekov() {
            //remove display : none
        }
        if(choice == "C"){
            document.write("chekov()");
        }
        else if(choice == "L"){
            document.getElementById("L");
        }
        else if(choice == "U"){
            document.getElementById("U");
        }
        }
    </script>

</head>
<body id = "body" onload= "input()">
    <div id = "paragraph" >
        <p>
            Star Trek has been a cult phenomenon for decades.
            Fans of the franchise are called Trekkies or Trekkers. 
            The franchise spans a wide range of spin-offs including games, figurines, novels, toys, and comics. Star Trek had a themed attraction in Las Vegas that opened in 1998 and closed in September 2008. 
            At least two museum exhibits of props travel the world. 
            The series has its own full-fledged constructed language, Klingon. 
            Several parodies have been made of Star Trek. 
            In addition, viewers have produced several fan productions.
            Star Trek is noted for its influence on the world outside of science fiction. 
            It has been cited as an inspiration for several technological inventions, including the cell phone and tablets.
            The franchise is also noted for its progressive era civil rights stances.
            The original series included one of television's first multiracial casts. 
            Star Trek references can be found throughout popular culture from movies such as the submarine thriller Crimson Tide to the animated series South Park.
        </p>
    </div>
</body>

<div class = "display" id = "C">
    <img src = "chekov.jpg" id = "image">
    <audio controls id ="audio">
        <source src = "chekov.mp3" type="audio/mpeg">
    </audio>
</div>  


<div class = "display" id = "L">
    <img src = "sulu.jpg" id = "image">
    <audio controls id ="audio">
        <source src = "sulu.mp3" type="audio/mpeg">
    </audio>
</div>  


<div class = "display" id = "U">
    <img src = "uhura.bmp" id = "image">
    <audio controls id ="audio">
        <source src = "uhura.mp3" type="audio/mpeg">
    </audio>
</div>  


</html>

and this is the external CSS

div.display{width:70%;background-color:#ccffe6;display:none; }
#audio {margin: 5px 5px 5px 5px;}
#paragraph {margin: 5px 5px 5px 5px;border: solid; width : 70%; background-color:#ffcc00;padding:5px;color: #b300b3;}
#body  {background-color : #b30000;}
#image {margin: 5px 5px 5px 5px;border: 15px solid #660066}

I only changed the code for option c to test. What I want to do is that when the user inputs C, it will print the function such that the id's class "display" has the "display : none" removed. Is there a way to remove the :display : none" from a class a function, or is there and alternative method. I was considering making it so the function changes the class to another class that is identical without the "display : none", but I feel that is the wrong way to go about this and would prefer not to use it.

This is my first time introduced to javascript and html so I would love suggestion to approach the problem and explanations on why I need to do certain things.

score 0 · Answer 1 · answered Feb 27 '16 at 03:41

First, a bit of terminology. "Classes" do not have "attributes". What you apparently mean is "rules" (which are defined by "selectors", which may include "classnames"), which have "property declarations".

So the correct title for your question would be "Is there a way to remove a property from a CSS rule?".

I was considering making it so the function changes the class to another class that is identical without the display: none, but I feel that is the wrong way to go about this and would prefer not to use it.

Why do you feel that that is the wrong way? That is how virtually all dynamic HTML/CSS/styling is done.

You do not need to make a separate, parallel class which is "identical" without the display: none;. Although there are different ways to approach this, the simplest is another rule which turns display back on, let's call it show:

div.show { display: block; }

and simply add and remove that class from your HTML element.

The alternative, which is to modify the rule in the spreadsheet, is definitely something to avoid. It is hardly ever really necessary. It makes it pretty much impossible to people looking at your code to figure out what is going on, since the CSS might have changed out from under them. It requires them to be familiar with a whole new API (the one related to managing stylesheets) which most people don't know, because they never have to use it.

About `div.show { display: block; }`... what if it originally `display:inline-block` ? — c-smile, Feb 27 '16 at 04:29
this might not work if the class `div.show` is written above the `div.display` , considering the css priority concept. Also if he places this new css rule in a different file then the file loaded last will have the priority. So i think what he needs is `div.display.show` — Rajshekar Reddy, Feb 27 '16 at 04:29

Is there a way to remove a property from a CSS rule?

1 Answers1