javascript - document.form.textbox.style....can't seem to find this? - javascript

Can anyone help point me in the right direction - I have the following in a function:
document.form1.textbox1.style.display = 'none';
which works fine.
But I'm trying to find a list of all the possible 'elements'(?) that could come after style, e.g. '.display=', '.length=' etc, but I don't know the proper name/terms so the searches i'm doing are not returning what I want.
Any ideas? Thanks in advance! :)
leddy

See the CSS spec. Convert hyphenated-names to camelCase (e.g. backgroundColor not background-color).
Also see the DOM spec.
That said, in most cases it is usually better to modify the element.className (and have a pre–written, external style sheet) instead of modifying the element.style.*

Are you looking for this?
It also shows browser compatibility.

Style basically maps onto the CSS. As such, display is a CSS property - this is what your setting.
Take a look at CSS and you should understand what you can and cannot set.
Hope this helps!
Ben

Related

Javascript code working in Mozilla Firefox but not in Google Chrome

I'm facing a little issue with my javascript code. In fact it's working in Firefox but not in Chrome, do you have any idea why I'm facing this issue?
Here is my code:
$('a').each(function(){
if($(this).css('background-image')=='url("linktothepng.png")'){
$(this).parent().remove();
}
});
Thank you for helping me, have a good day ;)
chrome will get it as url(linktothepng.png) (no quotes)
browsers parse css and format it their own way, it is not advisable to do text matches on those properties, just use a class with that background and check with hasClass() to prevent the inconsistency
The value returned by css('background-image') can be normalised in different ways by different browsers; they're all valid as long as they are equivalent CSS.
You could test for css('background-image').indexOf('linktothepng.png') != -1 which would work, assuming there isn't another image in use that has linktothepng.png as part of its name (which would require a more complicated test).
If possible though, you'd be better off only ever setting that background image by setting a class.
Easier to change.
Separates the meaning you are ascribing to that image from the fact that the image is how you are representing it.
Quicker to find, instead of replacing the test to something like if($(this).hasClass('the-class-you-use') remove the test and change the selector to $('a.the-class-you-use').

Why can't I directly assign to element.style in Chrome using JavaScript?

Quick question... for some reason, when I run the following in Chrome (or Safari) on my "li" tags:
myListElement.style.backgroundColor="red";
It works. Yet when I try the following:
myListElement.style="li{background:red;}";
It doesn't. However, it works in Firefox. Does anyone know why this is? I've resorted to using the latter method because when I do the first method it overrides the :hover styling I have assigned to my elements. Otherwise, I'd be using the first method. Any help is appreciated. Thanks guys!
If you check out the style attribute associated with DOM elements, you'll see that, at least in Chrome, it's actually a CSSStyleDeclaration object -- which is why changing it to a string doesn't work. One of its attributes is backgroundColor, and that is a string which you can simply modify. Hope this helps!
How about something like:
myListElement.setAttribute("style", "background:red;");

count objects in javascript

I have a little js problem and thought this wonderfull community would be able to help me!
Let's say I want to find all $('footer') elements and I want to know if there is either 1 or 2 footers on the page.
How would I do that?
using length() or something similar?
Thanks a lot for your help :)
Use the length[docs] property.
$('footer').length;
Please see the jQuery docs.
They're really very good, and typing length into the search field would dynamically bring the solution to you.
Or use the .size() function - see jquery docs
$('footer').size();
You can of course just use:
document.getElementsByTagName('footer').length;
But footer is an HTML5 element, many browsers in use do not support it yet.

Change all CSS property at run time

I have page which has several Button & images inside the <div>. I have such requirement :
On clicking over any image or button a div/page appears which contains all the css property and gives option to change the CSS property of concern element. eg. color, value, font size etc....
Is there any plugin available for that or do i need to create by own. I'd appreciate your suggestion
Thanks
you can refer these plugins and modify the source code according to requirement....
changecss
http://www.bramstein.com/projects/jsizes/
I doubt there will be such plugin which will know the ids/names of all your elements. The only way to have such plugin is if it searches by element type, but that will be really uncleaver, since it may list 100+ html elements, while you need to change only 5 (for example). It will be better and smarter to write it by yourself in my opinion.
jQuery makes such changes trivial, take a look at the .css() function. In order to get all elements you'll probably want to look at DOM traversal.
If you only need this for debugging purposes, you can use Chrom'e developper tools or Mozilla Firebug. They allow you to visualize and change CSS attributes on the fly.
If you need this for a shipping product, then good luck. It seems very hard, notably handling the CSS priority rules. Maybe you can get some reusable code from Firebug's code, which is mostly JS.
Use jquery for setting the desired css properties.
Use selector and google for setting css properties using Jquery.

Understanding Firefox' Autocompletion Popup

I build my own Richlist-Suggest-Popup for the URLBar along the lines of Mozilla.
When reading their Source I don't understand how they simply do a setAttribute('image', image) as a richlistitem actually doesn't support this attribute.
As far as I know the richlistitem DOM is supposed to look the following:
richlistitem.autocomplete-richlistitem
vbox
hbox
image.ac-site-icon
label
Generating this on my own almost works, but I'm kind of sure that this is the wrong way.
Could anyone explain either how Mozilla provides this feature or show me an example how one would achieve the behaviour?
I highly recommend DOM Inspector and Inspect Context. Using these, you can see that there are a number of different XBL bindings for those list items, and one of them must be the one that lets you add an image using an image attribute. I hope this helps!

Categories