How can I setup to change a border-color( css property ) of my .gallery( css class) to white, instead of black, when page loads?
I want this property to be the final, no override by index css file or any other css file.
the simples way would be:
$(document).ready(function() {
$('.gallery').css('border-color', '#ffffff')
});
This sets the style attribute of your node, overriding any properties from your css (unless they are set to !important)
Related
I have a div tag with a style attribute, I'm trying to change the value of the style attribute with javascript
i've tried with
document.getElementById("box").style
but still can't modify the --s variable
This is how it was originally:
Html
<div id="box" style="--s:1">
Then i took the style attribute in the js:
Html
<div id="box">
Javascript
document.getElementById("box").style="--s:1"
But still I don't know how can I modify --s with another value of another variable. thank you for your time and for any answers
EDIT:
the code is based on the first answer of this topic:
CSS 360 rotating progress radial using JS
the answer is in this post => CSS 360 rotating progress radial using JS
deg = deg + 10;
ele.style.setProperty("--v", deg+'deg');
you didn't read it correctly !
in your case this is:
document.getElementById("box").style.setProperty("--s", 1);
everything about this question is about CSS custom properties https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
I have done another sample code usage here: Html & JS rotate image 90 degrees on click
When you access the style property of a DOM object, you are accessing a CSSStyleDeclaration object. You don't set style equal to something. You access properties of that style object (left, color, top, etc.). If you assign a value to style, you wipe out the object stored in that property and instead just make the property hold the string you set it to, which breaks styling functionality.
If you want to change the value of the HTML style attribute (rather than accessing the style DOM property), use the setAttribute method:
document.getElementById("box").setAttribute("style", "--s:1");
try with attributes :
document.getElementById("box").getAttribute("style") // for reading value
document.getElementById("box").setAttribute("style", "background: red;") // for writing
I'm looking for a way to increase the width of the container so that the text fits, instead of having it be truncated with ...
I can't seem to get the container css attributes working e.g. containerCss. I get the error Uncaught Error: No select2/compat/containerCss.
I'm using select2 via npm
Right click and inspect the html text input and look at its class name. use chrome inpector and experement setting the width css attribute on those generated elements. Find the corresponding css class. Also look at the class names of its container element. Set the css of those elements to find a desired result. Then on the html page with the jquery selector library use the relevant class names and set the width. Alternitevly read the docs on jquery select library on css styling.
I want to change the dimensions of a set of elements that are not created yet. They will be created by a JavaScript script that I don't have access to. JQuery's css() function would apply the changes only on existing items, while I want the code to work like if I had set CSS properties in a CSS file.
Can anyone help me do it?
One option would be to dynamically create a style element:
$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head")
$("<div/>").addClass("redbold").appendTo("body");
Taken from here: Create a CSS rule / class with jQuery at runtime.
Here's a possible IE alternative (see Creating a CSS class in jQuery):
document.styleSheets[0].addRule('body', 'background: green', -1);
For reference, see the documentation for addRule.
The idea is making some border-radius effect in IE 7/8, so I've decided to use jquery.corner.js library. To make it more generic I want to write some script which applies corner() function to all elements within a page having border-radius property.
For example, for this element
.someElement
{
border-radius:10px;
}
function must do the following
$(".someElement").corner("10px");
The problem is that I want to apply rounded corners to all elements, including dynamically added elements and elements which are inheriting border-radius property among some action(hover, click, etc.). Is this possible?
You need to declare a function that applies you css on every change.
To detect css style changes, see here:
Event detect when css property changed using Jquery
Then you need call that function on style change and on dom tree change (every time you append something into the page)....
I would advise you use a specific class to apply border radius css. This way you can select the rounded elements via jQuery class selectors.
You should have a generic css class that is used on all elements that have rounded borders and then use that class in your selector.
You will have to do this in a document ready handler. This will of course only apply rounded borders to elements that currently exists. If you want to cover elements loaded with ajax you can do the following:
$(document).ajaxSuccess(function(e, xhr, settings)
{
$(xhr.responseText).find(".class-that-applies-rounded-borders").corner("10px");
});
I want to be able to remove/change the internal style sheets values through JavasScript. It has to be through JS because I cannot edit the html since I am using an application that does not allow me to, but I can use JS. How can I change the value for the background or remove it completely? Or is there another way to accomplish this?
<body>
<head>
<style type="text/css">
#company-header{background:#000 !important;}
</style>
</head>
<div id="company-header"></div>
</body>
If your just going to change small bits of css, using jQuery's css() is your best option, but it does not always recognize !important, for that you would probably need cssText, like this:
$('#id').css('cssText', 'height: 200px !important');
This replaces all the css, so everything needs to be defined in the new css rules that are added.
If you are changing a lot of css, or just want to make it easier for the next time, you could remove all inline css and add an external stylesheet instead.
To remove all inline styles you would do something like this:
$(document).removeAttr('style');
or for div's only
$('div').removeAttr('style');
Depending on how many styles there are, this could take som time to process.
Then to add a new stylesheet do:
(function() {
var myCSS = document.createElement('link');
myCSS.rel = 'stylesheet';
myCSS.type = 'text/css';
myCSS.src = '/styles/mystylesheet.css';
var place = document.getElementsByTagName('script')[0];
place.parentNode.insertBefore(myCSS, place);
})();
Edit:
function removeCSS() {
var badCSS = document.getElementsByTagName('style')[0];
$(badCSS).remove();
});
This will remove all the markup in the internal stylesheet, but since the styles are already loaded it will make absolutely no difference.
Internal styles will always override external styles, but for one exeption, if the external style is !important. If both the external and internal styles are !important, the internal style will be used.
Loading an external stylesheet dynamicly with javascript will only work if everything you are trying to override is set to !important in the external stylesheet, and not set to !important in the internal stylesheet.
Changing the styles directly in the DOM with jQuery's css() and using the cssText option to override the !important set in the internal stylesheet may be your only viable option if there is absolutely no way to alter the html file and remove the internal stylesheet.
EDIT: OK, now that we understand that this question is really just about how to override the !important style declaration when setting styles via javascript, this is a duplicate of this posting: Overriding !important style.
The two possible answers there are to set a whole style string on the object or to create a new stylesheet that refers to this object.
Previous answer before question was edited:
You can just set some style directly on the object if you want like this. This will override anything that comes from a style sheet so you don't have to mess with the style sheet.
$("#company-header").css("background-color", "#FFFFFF");
or
$("#company-header").css("background", "none");
A more extensible way of modifying the look of an object or groups of objects is to based the style settings on class names and then add/remove class names using jQuery. This has the effect of switching which style sheet rules apply to a given object without having to directly manipulate the style sheets themselves:
$("#company-header").removeClass("oldClass").addClass("newClass");
$(document).ready(function(){
$('style').remove();
});
This code will remove the all internal css from the site. I used this but style tag will be visible in the page source.