Javascript question for use in Razor View

Question

(BTW - if you know a good website forum for JS questions, I'd like to know!)

In my view, I include some javascript like this:

 let thumbnailElement = dropzoneElement.querySelector(".dz_thumb");

where .dz_thumb is defined in a CSS style sheet.

Then, I do this:

 thumbnailElement.style.opacity = "0.5";

And it works great.

My question is this: can I code these class properties in the CSS style sheet instead of in the view?

I tried defining a class in the style sheet:

 .opake {
     opacity: 0.5;
 }

and then adding it, like this:

    thumbnailElement.classList.add("opake");

But that doesn't work at all. I'm sure I'm missing an extra instruction!

Answer 1

Hi @Coreysan ,

can I code these class properties in the CSS style sheet instead of in the view?

Do you mean you will use an external CSS stylesheet file to add the CSS style? Or you will use the Aps.net core CSS Isolation?

Based on your code, I create the following sample, it works well on my side, you can refer to it:

When use an external CSS style sheet file to add the CSS style. 205637-indexcshtml.txt

In the wwwroot/css folder, add the IndexStyleSheet.css file with the following CSS style:

#myDIV {  
    height: 300px;  
    background-color: #FFFFFF;  
}  
  
#div2 {  
    border: 1px solid black;  
    background-color: yellow;  
    width: 200px;  
    height: 100px;  
    position: relative;  
    top: 80px;  
    left: 20px;  
    padding: 20px;  
}  
  
#div1 {  
    border: 1px solid black;  
    position: relative;  
    left: 50px;  
    padding: 20px;  
    background-color: lightblue;  
    width: 200px;  
    height: 100px;  
}  
  
.opake {  
    opacity: 0.5;  
}  
  
.opake2 {  
    opacity: 0.2;  
}  

Then, the output as below:

If you are using CSS Isolation (The project is an Asp.net 6 application), for example, add the html elements in the Index.cshtml page, and add the CSS style in the Index.cshtml.css file. Then the result like this:

But that doesn't work at all.

You try to use the following methods to debug your code.

1. Clear the browser cache.
2. Use F12 developer Network tools to check whether the CSS style file load success or not, and use Console tools to check is there any error? Besides, you can also set a break point to check whether the JS code executed or not and check the rendered html elements and the CSS style.
3. Try to create a new page and test my sample code, if it works, compare with yours.

If still not working, it is better to create a simple sample to reproduce the problem, then share it with us.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion