Overriding previously set float using javascript in ie - javascript

I've read this question to figure out how to set float:none on an element which already has float:right set with class.
I used element.style.cssFloat = "none", but this just added a new style property cssFloat which didn't over-ride the existing float:right. I've now fixed it using the adding/removing classes method.
But is there a way of over-riding existing float rules in ie without having to use classes?

Welcome to the wonderful world of non-standards.
Use cssFloat and styleFloat.
That said, using classes is the better approach. It keeps your presentation in the stylesheet instead of embedding it in the JavaScript.

Related

How to convert a HTMLElement to a string putting all css in style tag using jQuery

Is it possible to convert a HTMLElement to a string putting all css styles (including the ones created dynamically with javascript) in style tags?
You can get this by accessing the outerHTML property
$("your element selector").prop("outerHTML");
This will return a string value of the object with any inline styling included.
This won't include styling included in separate css files. If this is something you do need then I would recommend looking at this and this previous question.
Getting the styles is not really an options there are css rules, inline styles and user agent styles that affects the actual look too.
You can always use jQuery css() method to get the calculated values of an element: ref css()
$(ele).css('height'); //Most of common properties are supported
But that will not do the work you are after.
I will save it as an image using rasterizeHTML.js and I need element looks exactly as in browser.
If that is your goal I can suggest you use other methods and libraries that already does a good job: html2canvas
in html2canvas the results are pretty accurate and the major limit is with images - but there are several methods to overcome that such as using the images as backgrounds.
Hope I helped.

element.style or window.getComputedStyle() does not showing float

I am trying to copy all element style properties, to another element. (both inline and inheritance)
to do so I am using window.getComputedStyle(), but when I am taking all the style values the float value does not exist.
I even tried to use element.style and it not exist there.
but when I am using jQuery.css('float') I am getting the right value back, so it's exists for sure!
do you have any solution or smart way to do it?
Two things to consider: window.getComputedStyle() does not work in IE < 9 (docs here). Also, when accessing the float value via element.style, the property is named cssFloat because 'float' is a reserved word in JS (docs here). In IE < 9, the property is named styleFloat.
The reason your example works via jQuery is because jQuery knows of the inherent browser differences when reading calculated styles, and smoothes over them so that you can access them via a consistent API.
element.style maps to the style attribute, which does not consider inherited/external styles. For old IE, the property you want is element.currentStyle, which takes the inherited styles into account.
If you need a solution that does not rely on jQuery, you'll need to check for window.getComputedStyle() and use it if present, and fall-back to element.currentStyle for old IE (using the property styleFloat).
Hope that helps, cheers!

Changing CSS with JavaScript

When using JavaScript to change the CSS does the JavaScript simply make new inline-CSS which takes presidents? I've always felt inline CSS is trashy and was wondering if there's a better way?
For example if you have
<div id="author">Author's name</div> which is normally coloured green from a reference to an external CSS and you want to change it to red must you use
document.getElementById('author').style.color='#FF0000'
Must changes to appearance be done using inline-stying?
No, you're not modifiying the CSS. You're just setting style properties. The mark up of an element is decided by three things: CSS, style and inline properties like width="100". The order in which they are applied can get a little fuzzy.
style does always overrule CSS though, unless you're using !important.
A more common way to change the mark up of elements is to add and remove classes. This allows you to keep all your style definitions in your CSS file and makes your code considerably less complex.
You could do:
document.getElementById('author').className = "selected";
to add a class to it and have it be display in a different mark up.
If you're using jQuery you can use addClass and removeClass. Under the hood this just modifies the className property. It's easy enough to write your own implementation, you just need to do some string juggling.
There is more than one way to change the styling of an HTML element. If using jQuery, for instance, you can add/remove class names to elements easily, like so:
$("div").addClass("className");
It is always cleaner to define all your styles in classes so you can change the whole application look and feel easily instead of using inline styles.
the easiest way to do so is to define a CSS class
.reddiv {color: #FF0000}
then you can easily change the color of the div to red using jquery
$('#author').addClass('reddiv');

Is the only way to change a style to do it per-element in JavaScript?

I've been looking at a few different things I'd like to using JavaScript to tweak styles globally. I'd like to do this by changing the CSS rule that dictates the element's style (akin to doing this through the Inspector in Webkit), but after coming to https://developer.mozilla.org/en/DOM/CSSStyleRule I now don't know if this is even possible:
style
Returns the CSSStyleDeclaration object for the rule. Read only.
So, is there no way to change higher-level styles in JavaScript?
To modify your existing styles, either find the stylesheet in document.styleSheets or from the the .sheet property of the <style> or <link> element you want to modify. Then modify the properties in whatever rule they're located in (see https://developer.mozilla.org/en/DOM/CSSRuleList). I'd advice against using the CSSOM to modify properties, as browser support for modifying CSS properties through the CSSOM is pitiful (no browsers whatsoever support it). Instead, just set a string value.
If all you want to do is insert a new rule, just get a stylesheet from the method above, or document.documentElement.appendChild(document.createElementNS("http://www.w3.org/1999/xhtml","style")).sheet. Then use insertRule to add your rule.
CSS Styles can be created/changed programmatically via javascript, but that is not usually the easiest way to solve a problem because different browsers do it differently so cross-browser support is a bit of a pain unless you already have a library that abstracts that. You can see generally how to do it here: http://www.quirksmode.org/dom/changess.html.
If the styles you want to switch between are known in advance, then the easiest way to change between them is to define both those styles in a stylesheet, and use different class designations to trigger one vs. the other.
If you are just trying to affect one object or a small number of objects, you can simply add or remove a class name via javascript on the affected objects.
If there are large numbers of objects, then something I've done is to add a class name on the body tag to trigger the alternate style to take effect for all affected objects. It works like this:
Lots of these in your HTML:
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
Then, have two pre-defined CSS rules like this in this order:
.foo {background-color: #777;}
.alternate .foo {background-color: #F00;}
Then, using Javascript, any time you want to change to the alternate style, you simply do this (using jQuery or any favorite class library):
$(document.body).addClass("alternate");
To go back to the original style, you can just remove that class:
$(document.body).removeClass("alternate");
This doesn't have to be added to the body tag - it can be added to any common parent of all the affected objects.
I personally find this a lot simpler than programmatically creating style rules and it keeps the actual style information out of the code (where designer people who aren't programmers can more easily access it).
You can see this technique in action here: http://jsfiddle.net/jfriend00/UXKvg/

What is "CSS on-the-fly"?

What is CSS on-the-fly?
Does JavaScript allow to modify CSS on-the-fly?
Changing an Elements CSS Attributes
The easiest way to modify CSS on the fly is probably with Jquery:
$('#elementID').css("height", "300px");
First parameter is the CSS attribute, second is the new value.
Try and steer away from over using this, as it wont degrade nicely probably for people without Javascript enabled.
Changing CSS Classes
Related info: How can I change the css class rules using jQuery?
This afaik is not possible on the fly, see above link.
You can also use .style to access css styles in javascript eg
document.getElementById("anElement").style.width = "300px";
Though I think this might only affect single elements
Yes. It does allow you to modify the CSS on the fly.

Categories

Resources