question

CoreyFleig-6304 avatar image
0 Votes"
CoreyFleig-6304 asked CoreyFleig-6304 commented

Javascript question for use in Razor View

(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!


dotnet-aspnet-core-general
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.


It seems to work. Maybe the style is not available because the browser still used a cached CSS file? Try clearing the browser's cache manually this time.


0 Votes 0 ·

@Viorel-1

Thanks for your suggestion - that was definitely part of the problem. I did that, plus changed some code, and it worked as expected.
Thank you for your suggestion!

Corey

0 Votes 0 ·

1 Answer

ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered

Hi @CoreyFleig-6304,

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

205655-image.png

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:

205636-2.gif

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:

205701-1.gif

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


indexcshtml.txt (1.7 KiB)
image.png (99.2 KiB)
2.gif (645.3 KiB)
1.gif (1.3 MiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.