can we use CSS file in javascript? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
green fisher here again.
Here is my this time question:
can we use CSS file in javascript?
I indeed know how to do the that: object.style = "";
however, if we can like do something really easy like: import stylesheet.css
then we can do something like object.style = stylesheet.getStyleById('#something')
well, those syntax above are all bullshit by my imagination, however, is there some similar way to do it?

The more appropriate approach would be to add class names to your elements. Then use a regular CSS file to style per class name.
Include in a normal CSS file
.red-text {
color: red;
}
Then add the relevant class name with JavaScript
document.getElementById("element").className += " red-text";

I think an easier way to do this is dynamically adding/removing classes/ids on the elements you want to style. You can do it using the jQuery addClass and removeClass functions, or with the element.className attribute.

Related

Is it always better practice to add classes to elements than styling them directly? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Is it better to hide an element by adding display: none; to the element using JS or is it better to add a class that has the attribute display: none;? I understand that adding a class is usually better than adding styles directly because it's easier to manage but if it's only one property is it okay to just add style directly?
This really comes down to personal preference if we're talking about adding or removing a single style.
Personally, I prefer just adding/removing classes even for simple stuff like showing/hiding elements. The problem with inline styles is if you ever want to apply classes to the same element, the inline style will get precedence, which can cause some confusion and you're wondering why your newly added class's properties aren't applying.
The other benefit to applying classes for styling is you can easily add or remove properties in one place (the CSS) and you never have to update your Javascript (unless you make a new class and want to add/remove that also).

How to create the changeable color scheme for a website? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
How to create the changeable color scheme for a website?
I even do not know how to start to do it.
I know only, that I should use sass.
Could you give some links to tutorials?
ex:
example
You can achieve this in many different ways. First ones that come into mind are:
In plain CSS
You can set a general CSS class on your body tag and based on that load a custom color CSS file. You have to use the custom CSS properties. Beware of browser support though. The idea is to use variables instead of plain color codes, and color the elements using you custom color palette.
Using pre-processors
For more browser support, you can use pre-processors like SASS or LESS, with the same technique.
The main idea is to not use plain color codes in your main CSS file(s), but use variables that load the colors you defined in you color scheme.
Have a great day.
Cheers

How can I create a data toggle with HTML/CSS? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I posted a link to the picture of the layout I am working on. I do not have any experience with jQuery and JavaScript; so is there a way I can create a data toggle like this with pure HTML/CSS3 ?
I think there is no way with pure CSS because css pseudo-classes just allow You to check if the button is active so like when you are pressing it try this and keep it pressed:
JsFiddle
You can give to all buttons a different id for example #button1, #button2, #button3
and to the filters also different ones #filter1, #filter2, #filter3
And then in Your css do something like this
#button1:active ~ #filter1 {
//your changes to the css
}
but this is just temporary, if You really dont want to use JQuery so You can try to use checkboxes and style them in a better way to fit your needs and then use the ':checked' pseudo-class
Like Here
For the close button You will not make it with only css, if You want I can give You the JQuery code :)

Adding a Maxlength attribute to HTML using jQuery [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm having an issue at work with a rather picky client.
We use a rather strange script to deal with something that they require. We're an online assessment company and this script in general applies in our test player, rather than in our question editor, so we can't make change in the html, as you normally would with a text input box.
I know the maxlength attribute can be added through use of jQuery by using something along the lines of
$("input").prop("maxLength", 3)
However, I do not know how I would reference this in the HTML, as it would only be used in a couple of questions that use this script so making it standard for these questions by adding it to the JavaScript used is not an option.
The inputs that you need to apply this to would need to have ID's or Classes.
As you cannot edit the HTML this would only work, if those input's had ID's or Classes already.
If you want to apply it to an element with an Id you would do:
$("#IDGOESHERE").prop("maxLength", 3);
http://api.jquery.com/id-selector/
If it was with a class :
$(".CLASSNAMEHERE").prop("maxLength", 3);
http://api.jquery.com/class-selector/
You could get a little more fancy, by using EQ,
$("input").eq(5).prop("maxLength", 3);
Which would apply the max length to the 5th input on the page.
http://api.jquery.com/eq/

Using CSS in JS [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am trying to change CSS elements depending on situations used in javascript.
an example I had tried was:
if ('image'=="clicked")
{blahblahblah}
'image' would be my div id or div tag in CSS.
I know in Jquery I can use $('#image').click, but I don't think it Jquery will be good for my situation.
Consider document.querySelector. It's powerful, accepting any valid CSS selector. You can even start from another element, such as myElement.querySelector, to only get children of that element that match the selector. Very useful!
Just be aware that IE7 and below do not support this function.
Assuming your id as image
document.getElementById('image').onclick = function() {
alert("button was clicked");
}​;​

Categories