There is some content in html page and one of div style for that is like below:
.class1{
property1:value1;
property2:value2;
property3:value3;
property4:value4;
}
I want to avoid applying css property property1 into concerned content and rest property property2, property3, property4 are welcomed.
I want to avoid applying property1 and don't want to change the css file.
Also I don't want to use as below:
$('.class1').css('property1','some different value');
I just want to avoid property1 using code.
Please tell me how I done using jquery or js.
----------------------Edited------------------------
I don't want to generate any inline css on run time.
I am looking ui code some thing like as below:
$('.ui-resizable').css('position').disable()
There is not function avaialbe to do that , one way to achieve this is
$('.class1').css('property1','');
Just set an inline style on the element that negates the property or makes it what you want. No jQuery necessary. Inline styles will always override inherited styles.
<div class="class1" style="margin:whatever"></div>
Make another class "class2" with css and use
/* CSS */
.class2{
property1:value1;
}
//JQuery
$('div').removeClass('class1').addClass('class2');
Preserve the value of property1 as:
var p1 = $('.class1').css('property1');
Now apply changes to the class as necessary.
Finally, restore the value of property1 as:
$('.class1').css('property1',p1);
Related
I use span elements like button and I disable and enable it depending on bussnies condition using old JS code like this:
document.getElementById('lblChecks').disabled = false/true
in HTML
<span id="lblChecks" disabled="disabled" class="GridHeader" onclick="ChecksPoPuP();" style="display:inline-block;color:White;height:19px;width:132px;cursor: hand;">Cheques</span>
In CSS I use .GridHeader[disabled="disabled"] but it doesn't work on chrome, but it works fine on IE.
So how can I filter (.disabled) as dynamic property in CSS
Note: the problem can be solved easily using addClass and removeClass in JQuery but I have a lot of files and its hard to replace all of them
You can define a common class name for all the elements which is disabled/enabled back and forth, and use CSS to style it.
For example:
.att-disabled:disabled{ // style goes here }
Refer more:
https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
I wanna get a style of an element from css file with javascript. But, i just can getting only elements i enter style properties on javascript. I tried like this on Angular;
angular.element(document.getElementById("box")).css("width")
It's not worked. After, i tried like this;
document.getElementById("box").style
But it's not worked. How can i accomplish this?
This isn't an Angular issue, it's just how CSS and Javascript interact. You need to use getComputedStyle to read style properties that were defined in a CSS file.
// This will work (because it's an inline style)
console.log(document.getElementById('a').style.width)
// This won't work (because the style was defined in css):
console.log(document.getElementById('b').style.width)
// getComputedStyle will work regardless of the source:
console.log(window.getComputedStyle(document.getElementById('b')).width)
#b {width: 100px}
<div id="a" style="width: 100px">A</div>
<div id="b">B</div>
You cannot get css template rule values of elements calling style properties unless they were set
*1. using inline style on html element level; or
*2. the style property has been set using JavaScript
which does the same: writes to inline html style property of the target element.
the solution is to use the computed style instead:
as in : getComputedStyle(box,0).width
I have an HTML page containing XML. Using Javascript, the XML attributes can be changed when the user clicks a button. (So far, everything works)
However, the attribute that is changed is used in the linked CSS to determine the background color of the element. When the attribute value is changed, the style is not refreshed, so the color doesn't change.
I can alter the javascript to also change the color, but that would involve hardcoding the color, and partially defeat the point of using CSS.
So, it seems to me, I need to do one of two things, and I can't figure out how to do either:
read the color from the CSS, and then assign it using javascript
somehow use javascript to have the CSS re-applied to the document.
Which approach is better? I assume the 2nd is easier, unless there is a side-effect I haven't thought of. And, whichever approach is better, HOW TO DO IT?
My CSS contains:
*[cleared=true] {
background:lightgrey;
}
My XML looks like this:
<Transfer ID="31266" Date="2015-04-14" Cleared="false">
<AccountCharge Account="Unplus">-826.20</AccountCharge>
<AccountCharge Account="Amex">826.20</AccountCharge>
<TransactionID>1504140662984782</TransactionID>
</Transfer>
My Javascript is:
function Reconcile(Element_ID){
try {
var c=document.getElementById(Element_ID);
c.setAttribute('Cleared','True');
}
catch(e) {
alert(e.description);
}
}
I have tried changing the script from modifying 'Cleared' to 'Date', and I can see the date change. The 'Cleared' attribute is not displayed directly by the CSS, but is used to set the formatting of other elements and/or attributes.
Changing the value of 'Cleared' before the page is loaded has the effect I expect - the CSS causes the formatting I expect. However, after the page is loaded, when the javascript changes the value of 'Cleared', no visible change in formatting takes place.
Did you try to assign classes?
Either with pure Javascript:
document.getElementById('selector').className = 'active';
or with jQuery:
jQuery('#selector').addClass('active');
This way you can use CSS classes and not hardcode the colour in your Javascript code.
See implementation of addClass and removeClass in Javascript:
http://jaketrent.com/post/addremove-classes-raw-javascript/
There's some info about changing style of HTML element with jQuery: jQuery changing style of HTML element
There's some more if you change your mind: How to modify STYLE attribute of element with known ID using JQuery
You can either add some extra styles or just switch the target class/id.
I have a situation in my project , in css I have a class
which is empty for now
#version_mobile.hidden
{
}
and in js Im doing this
this.$("#version_mobile.hidden").css({right: - window.text_mobile_width});
(I supose my selector is bad ?)
how to add "right" atribute to this class with this dynamically created value ?
to class become
#version_mobile.hidden
{
right : -450px;
}
Btw I need to use this class because the animation is working with it :/
.css() function changes the inline css style but has no effect over the css classes at all.
As pointed out in the documentation:
When using .css() as a setter, jQuery modifies the element's style
property.
You can also change the classes by using the addClass(), removeClass() or even the toggleClass() functions of jQuery.
You cannot add to the class properties, but you can apply rules to the element style.
this.$("#version_mobile.hidden").css({"right", "- window.text_mobile_width"});
you can not add definations for class in jquery.
but you can add any style to your selecter.
What are you trying to achieve?
you cannot add a property to the css file using this.
what you should look at is you apply this id or class to your html elements
and access the elements in the javascript using the jquery selectors
$(#selector) and modify the property using .css.
So you will achieve the same result this way as any existing property style for that
element will be overridden with your latest style put through the jquery.
It's technically possible to modify style rules on the fly, but it's difficult.
In the document object you will find an (array) property called styleSheets, with one entry for each referenced stylesheet.
Each stylesheet object (of type CSSStyleSheet) has an insertRule method, which you can use to create new rules, or delete existing rules. What appears to be difficult is enumerating the existing set of rules so you can find which one to modify or delete.
That said, it's generally far preferred to simply change an element's classes than to try to dynamically change the styling of an existing class.
See also http://davidwalsh.name/add-rules-stylesheets
I want to do this:
e.className = t;
Where t is the name of a style I have defined in a stylesheet.
If e is a reference to a DOM element and you have a class like this: .t {color:green;} then you want reference the class name as a string:
e.className = 't';
Yes, that works (with the class name as a string, as jonah mentioned). Also, you can set style attributes directly on an object, using the DOM Level 2 Style interface. e.g.,
button.style.fontFamily = "Verdana, Arial, sans-serif";
where button is (presumably) a button object. :-)
Not only that works, but it's even a best practice.
You definitively want to separate the data format (xHTML) from the design (CSS) and the behaviour (javascript).
So it's far better to just add and remove classes in JS according to event while the esthetic concerns are delegated to css styles.
E.G : Coloring an error message in red.
CSS
.error
{
color: red;
}
JS
var error=document.getElementById('error');
error.className='error';
N.B :
This snippet is just an example. In real life you would use js just for that.
document.getElementById is not always interoperable. Better to use a JS framework to handle that. I personally use JQuery.
Here is the example that add and remove the class using jQuery.
// js
$("p:first").addClass("t");
$("p:first").removeClass("t");
// css
.t {
backgound: red
}
document.getElementById('id').className = 't'