We Keep Coding

jQuery check if element has a specific style property (display)

I need to have a if/else statement inside a function. How do you check if an element (e.g. #cadrage) has a display style property? This is what I have found around the net and yet, it is not working..
if( $('#cadrage').attr('style').display == 'block' ) {
// do something
} else {
// do something
}

The jQuery .css() function seems to be what you want.
if( $('#cadrage').css('display') == 'block' ) {
console.log('It equal block');
} else {
console.log('It did not equal block');
}
http://jsfiddle.net/SamMonk/FtP6W/

Your code doesn't work because style property only contains inline styles, not those coming from a stylesheet.
To get the computed style, you can use css method:
$('#cadrage').css('display') == 'block'

Try this:
if( $('#cadrage').css('display')== 'block' ) {
// do something
} else {
// do something
}

You can get your element display property with the following code snippet
$('#cadrage').css('display');
Note that the css method can return any css property of your element so it is very handy.
Therefore your statement code will be:
if( $('#cadrage').css('display').display == 'block' ) {
// do something
} else {
// do something
}

Not exactly what you ask for, but perhaps what you are looking for...
You can use the :visible pseudo selector to check if the element is visible:
if( $('#cadrage').is(':visible')) {
// do something
} else {
// do something
}
Note that this doesn't actually check the display style, but rather if the element has a size so that it could be seen in the page.

Uncaught ReferenceError: parentsCheck is not defined

I am very new to JS, but am trying to create a checkbox that when checked will reveal a div with an id of "second_row", and when unchecked will hide it (unchecked by default). Am I missing some code? Is my syntax incorrect? I could really use some help. Thanks for givin a newbie a hand!
Html:
<input type="checkbox" name="under_18" id="under_18" class="check" value="under_18" form="contest_form" onclick="parentsCheck()" />
JavaScript:
<script>
function parentsCheck()
{
var check1 = document.getElementById('under_18'),
if (check1.checked === true) {
document.getElementById('second_row').style.display = 'block';
}
else if (check1.checked === false) {
document.getElementById('second_row').style.display = 'none';
}
}
</script>
P.S. Dont know if it matters, but the checkbox is in a table cell.

Your , at the end of the var statement should be a ;.
It's causing a SyntaxError, causing the JavaScript block to be effectively ignored, so parentsCheck() is never defined.
var check1 = document.getElementById('under_18');
http://jsfiddle.net/tYv28/
As an aside, check1.checked will always return a boolean, so you don't need to do the === true and === false comparison; the following will work just fine:
function parentsCheck()
{
var check1 = document.getElementById('under_18');
if (check1.checked) {
document.getElementById('second_row').style.display = 'block';
} else {
document.getElementById('second_row').style.display = 'none';
}
}

When using event handler attributes, JavaScript only recognizes functions in the global scope. Try defining the event handler in your JavaScript, which also has the benefit of being unobtrusive:
var el = document.getElementById('under_18');
el.onclick = parentsCheck; // <---- This
jsFiddle
Also, you need to change the , into a ;.

Trying to set a conditional within a jQuery blur() event

I'm trying to get an input box to perform on blur() either set a value of 0.000 if the value entered is an empty string and if it isn't then perform some function. This is what I have. Help me out here, I don't know the appropriate syntax on how to do this.
jQuery("#10kt-weight").blur(function(){
if(valueOf("#10kt-weight") == "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});

jQuery("#10kt-weight").blur(function(){
if(jQuery("#10kt-weight").val() === "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});

Since your function is executed by the .blur() method, using this inside the function will refer to #10kt-weight, you can get the actual value of your element with jQuery(this).val() (or this.value) Try this:
jQuery("#10kt-weight").blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val("0.000");
} else {
calc_value();
}
});

You can try with jQuery.trim() to trim spaces and .length to check if there are characters after trim the input value
jQuery("#10kt-weight").blur(function(){
if(jQuery.trim(jQuery(this)).length) {
jQuery(this).val("0.000");
} else {
calc_value();
}
});

Find all block elements

I need to find all block elements in a given node. Block elements are not just elements that have display:block in the CSS, but also default block elements like div and p.
I know I can just get computed style of the element and check for the display property, however, my code will execute in a long loop and getting computed styles flushes reflow stack every time, so it will be very expansive.
I'm looking for some trick to do this without getComputedStyle.
Edit
Here's my current code that I would like to improve:
var isBlockOrLineBreak = function(node)
{
if (!node) {
return false;
}
var nodeType = node.nodeType;
return nodeType == 1 && (!inlineDisplayRegex.test(getComputedStyleProperty(node, "display")) || node.tagName === "BR")
|| nodeType == 9 || nodeType == 11;
};
Another edit
jQuery's .css calls getComputedStyle under the hood. So that's not what I'm looking for.
My solution
Thanks everyone for suggestions. Unfortunately, none of them matched what I was looking for. After a lot of digging through documentation I realized that there's no real way to do this without getComputedStyle. However, I came up with the code that should avoid getComputedStyle as much as humanly possible. Here's the code:
$.extend($.expr[':'], {
block: function(a) {
var tagNames = {
"ADDRESS": true,"BLOCKQUOTE": true,"CENTER": true,"DIR": true,"DIV": true,
"DL": true,"FIELDSET": true,"FORM": true,"H1": true,"H2": true,"H3": true,
"H4": true,"H5": true,"H6": true,"HR": true,"ISINDEX": true,"MENU": true,
"NOFRAMES": true,"NOSCRIPT": true,"OL": true,"P": true,"PRE": true,"TABLE": true,
"UL": true,"DD": true,"DT": true,"FRAMESET": true,"LI": true,"TBODY": true,
"TD": true,"TFOOT": true,"TH": true,"THEAD": true,"TR": true
};
return $(a).is(function() {
if (tagNames[this.tagName.toUpperCase()]) {
if (this.style.display === "block")
{
return true;
}
if (this.style.display !== "" || this.style.float !== "")
{
return false;
}
else {
return $(this).css("display") === "block";
}
}
else {
if (this.style.display === "block") {
return
}
else {
return $(this).css("display") === "block";
}
}
});
}
});
Usage of this code is very simple just do $(":block") or $("form :block"). This will avoid using .css property in a lot of cases, and only fallback to it as a last resort.
Starx's answer was what gave me the idea to do this, so I'm going to mark his message as an answer.

For the answer to this problem, we take into account the universal CSS selector and the jQuery .filter() function:
$("*").filter(function(index) {
return $(this).css("display") == 'block';
});
This code looks at all elements it can find, and it returns a list of elements if they pass a filter. The element passes a filter if the filter function returns true for that element. In this case, the filter tests the display property of each found element and tests it against the desired value.
Now, you also mentioned that you want to find p and div elements. Luckily, we also have a way to find these in the filter function. Using jQuery's prop function, we can return a property of an element. In this case, we are interested in the tagName property of the DOM elements being filtered. Combining this feature with the above filter, we get:
$("*").filter(function(index) {
var $this = $(this);
var tagName = $this.prop("tagName").toLowerCase();
return $this.css("display") == 'block' || tagName == 'p' || tagName == 'div';
});
Notice how we set the tagName variable to lowercase, because we cannot expect a certain case for the tagName property (correct me if I'm wrong).

The best way I see is to
assign a common class to all the not-native block element and
using jQuery's mulitple-selector.
Then we can do it as simple as this this
CSS:
.block { display: block; }
jQuery:
var blockelements = $("div, p, table, ..., .block");
// ^ represents other block tags
If you want to include all the block elements. Here is a link

maybe this helps.
$('*').each( function(){
if ($(this).css("display") === "block")
$(this).css("background", "yellow") ;
});
jsfiddle

how to change textbox background color through javascript?

my javascript-
function validate_loginform(loginform)
{
var uid = loginform.uid.value;
var pass = loginform.pass.value;
if(uid == "")
{
color('uid');
return false;
}
if(pass == 0)
{
color('pass');
return false;
}
return true;
}
function color(traget)
{
var targetbox = document.getElementById(target);
targetbox.style.backgroundColor="red";
}
but background color is not getting changed even it is not returning fasle value. if I remove the color('uid'); nad put alert("user name required"); then this script is working fine.Whats wrong?
it backgroundColor in actual program I just missed it here only

With jQuery you could try this:
$("#textbox").css("background-color", "red");

dont call color function, change color inside if condition like-
if(uid == "")
{
//alert("You must enter User ID.","error");
loginform.uid.style.borderColor='red';
loginform.uid.focus();
return false;
}

Typo?
backgroungColor
^
Update
Typo?
function color(traget)
^^^^^^
{
var targetbox = document.getElementById(target);
Seriously, actual code does matter.

Beware your spelling. It should be "target", not "traget".
function color(traget)

You've spelt target wrong in your function header and background wrong in the last line of the function.

just remove the single quote (') from color('uid')
and write it as color(uid);