Display CSS attribute - javascript

Is it possible to use JQuery or JavaScript to check the value of a CSS attribute? For example, suppose I have a div with id = mydiv. I want to check the value of the display attribute.
I try
$("#mydiv").display
But this does not work
Any tips?


Use the .css - $("#mydiv").css("display")


You're looking for jQuery's css method:
$(...).css('display')


Apart from css display attribute check via jQuery which is this:
$('selector').css('display')
the alternative is
$('selector').is(':visible')
This checks whether an element is actually visible and occupies space in DOM.


Using the .css()
Example: http://jsfiddle.net/5wyjW/
$("#mydiv").css("display");


You can do it : $("#mydiv").css("display")

Related

How to make iron-data-table scroll document?

I understand that <iron-data-table> is based on <iron-list>, so I tried to set the attribute of the table's inner <iron-list> like this:
$('iron-list').removeAttr("on-scroll");
$('iron-list').attr("scroll-target","document");
I also tried to select the list this way document.querySelector('iron-list')
But none of them works, so what is the correct way to make it scroll the page instead of scrolling the table itself?

Try to use querySelector. Get the element by using querySelector and use setAttribute function. For example
this.querySelector('#id').setAttribute("scroll-target", 'document');
To remove attribute, use .removeAttribute()

How to check what an element is if we only know its ID?

If we only know the ID of an element, is it possible to check using javascript or jQuery what kind of an element it is, whether its textarea, div, span or something else?

By using jQuery:
$("#someid").prop("tagName");
By using JavaScript:
document.getElementById("someid").tagName;

document.querySelector('#id').nodeName

jQuery selector custom attribute

I have elements in my page like
<div class="editableTxt" data-model-attr="name" data-model-id="123">some text</div>
Now how do I write a selector in jQuery based on the 2 custom attribute values.
So i want something like select element with data-model-attr="name" data-model-id="123"
I want to get a unique element. So I use the 2 attributes.

USe like this
$("[data-model-attr='name'][data-model-id='123']")

As you specified element and not div, have you simply tried:
$('[data-model-attr="name"][data-model-id="123"]');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/x23BV/
for a div obviously just add div:
$('div[data-model-attr="name"][data-model-id="123"]');

Use:
$('div[data-model-attr="name"][data-model-id="123"]');

$('div[data-model-attr="name"][data-model-id="123"]')
But don't use it, it's very slow, set id or classes to this div.

Using CSS properties as input values

I'm trying to display the current background colour of a container in an input. The JQuery I'm using doesn't work though, any ideas?
$('#custom-prev').attr('value', '$(.preview).css("background")');

$('#custom-prev').val($('.preview').css("background-color"));
If you want it as setted in attribute style, use that:
$('#custom-prev').val($('.preview')[0].style.backgroundColor);

Remove the quotes around $(.preview).css("background") and also you need quotes around .preview inside the jquery selector: $('.preview').css("background")
$('#custom-prev').attr('value', $('.preview').css("background"));

How bad is it to add other attribute to an element or what other options are there?

I have an element where I'm already using the rel attribute, but I would also like to add another attribute that I'll be using in JavaScript.
Link
Is it alright to add other attributes? Or is there a better option?

I would use html5 data- attributes. Even if you are not using html 5 you can be sure your work will still work and is futureproof.
e.g
<li class="user" data-city="Boston" data-food="Bacon">

It's okay to add new attributes through JavaScript, but if you add them directly in the source, your markup won't validate. If it's just one more attribute you need, there's a rev attribute just like rel.

Categories

Resources