How to add style=display:"block" to an element in jQuery?
$("#YourElementID").css("display","block");
Edit: or as dave thieben points out in his comment below, you can do this as well:
$("#YourElementID").css({ display: "block" });
There are multiple function to do this work that wrote in bottom based on priority.
.css()
Set one or more CSS properties for the set of matched elements.
$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
display: "block",
color: "red",
...
})
.show()
Display the matched elements and is roughly equivalent to calling .css("display", "block")
You can display element using .show() instead
$("div").show()
.attr()
Set one or more attributes for the set of matched elements.
If target element hasn't style attribute, you can use this method to add inline style to element.
$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")
JavaScript
You can add specific CSS property to element using pure javascript, if you don't want to use jQuery.
var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red";
// Multiple properties
div.setAttribute("style", "display:block; color:red");
Depending on the purpose of setting the display property, you might want to take a look at
$("#yourElementID").show()
and
$("#yourElementID").hide()
If you need to add multiple then you can do it like this:
$('#element').css({
'margin-left': '5px',
'margin-bottom': '-4px',
//... and so on
});
As a good practice I would also put the property name between quotes to allow the dash since most styles have a dash in them. If it was 'display', then quotes are optional but if you have a dash, it will not work without the quotes. Anyways, to make it simple: always enclose them in quotes.
If you are using BS5 and Tabulator I found that I had to add position: static to the cell AND add it to the button.
So, I added the following CSS:
.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
position: static;
}
and on the Tabulator div I have:
<div id="myTable" class="table-sm table-responsive"></div>
and finally on the event I do:
myTable.on("dataProcessed", function(data){
$('[tabulator-field="my_fancy_field"]').css("position", "static");
});
You will need some way of finding the right cell. I used the field that I am loading the data from.
I then end up with (on most rows) something that looks like this:
And on the last row it pops upwards like this:
Related
I need to add styling to a DIV element using JavaScript. I have the following DIV in my document:
<div class="RnEpo Yx5HN " role="presentation">
The script that I have tried is:
WebElement = document.querySelectorAll("div[class='RnEpo Yx5HN ']");
WebElement.style='height: 10000px;'
WebElement.setAttribute("height = 1000px;");
I want to achieve the same styling as this CSS:
.RnEpo Yx5HN
{
height: 100000px;
}
To achieve what you require, first replace querySelectorAll() with querySelector() seeing that your only need to select the first matching element.
Consider also revising your selector from div[class='RnEpo Yx5HN '] to a more robust selector in the form of div.RnEpo.Yx5HN which is to say:
Select div elements that have classes any ordering of class RnEpo and Yx5HN
Lastly, revise the way that you're applying the inline style so that the height attribute is directly specified on the WebElement style object.
These changes make the call to setAttribute() redundant. Note also that; setAttribute() takes two arguments, and the DIV element does not have a native height attribute.
Here's a working snippet showing this in action:
/* Use querySelector() to select first matching element and use dot notation syntax to select div with both classes */
const WebElement = document.querySelector("div.RnEpo.Yx5HN");
/* Apply inline style, avoid invalid setAttribute call */
WebElement.style.height = `10000px;'
<div class="RnEpo Yx5HN" role="presentation">
I am doing a school project and it's my first time using JS, and we are not allowed to use any ID's for css styling, but on some event that the user does I want to change the style of a div in the page:
HTML:
<div class="ads">
...
</div>
CSS:
.ads{
display:block;
//and some other style properties
}
and when the user do the event I want to change the display property into :
display : none;
I know how it can be done using ID for the element, but how can it be done only by a class name?
I would like to be able to do it something like this:
document.getElementsByClassName('ads').style.display=none;
Thank you.
If you know that there is only one element with that class, use the first element of the NodeList that document.getElementsByClassName returns:
document.getElementsByClassName('ads')[0].style.display = 'none';
document.getElementsByClassName('ads')[0].style.display ='none';
If you have just a one element with class"ads", you can use:
document.querySelector('.ads').style.display='none'
Else, if you have more than one element you can add a unique class name for you element like this
<div class="ads foo">
and using document.querySelector('.foo').style.display='none'
for changing it's style.
You should put index, also the string after the equal sign must be with quotation marks, like below:
document.getElementsByClassName('ads')[0].style.display="none";
w3schools
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.
I have a simple block of code to hide/show two divs. It works great, the only issue I have is that I need to return the display value to the #MSOZoneCell_WebPartWPQ2 back to table. I have set it to none in the css initially. The last line doesn't seem to take effect.
here is the code:
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').css('display') == 'table';
});
});
You're using == operator
Try this:
$(document).ready(function(){
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').attr('style','display:table;');
});
});
you should use .css( propertyName, value )
Set one or more CSS properties for the set of matched elements.
so your last line should be
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
when you call .css( propertyName )
$('#MSOZoneCell_WebPartWPQ').css('display);
you are Getting the value of said property not setting it
Get the computed style properties for the first element in the set of
matched elements.
Update 1:
please note that Jquery's .show(), .hide() and .toggle() will only work with elements with block display property.
so one way to avoid changing the display property back and forth is to wrap the wanted elements in a div (container) and .toggle() it.
I have created a JSFiddle, I warped each div in a container div with a calss called "toggle" and set initial display value of one of them to "none" using style attribute.
<div class="toggle" style="display:none">
now I toggle between them using this
$('.toggle').toggle();
Update 2:
you can also use .toggleClass() here's another JSFiddle
Add this to your CSS
#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
display: none;
}
add a class to the div you want initially hidden
<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">
toggle the class using this
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggleClass("hiddenDiv");
$('#example_wrapper').toggleClass("hiddenDiv");
});
});
in this example I'm using a class called "hiddenDiv", if you change it make sure the class name is the same in CSS, HTML and JS.
you are sure you need "==" to set the value? or one "="
Firstly == is an equality check. You should use = to set a value.
Secondly, the css() method setter accepts two parameters. The rule to set and the value itself. Try this:
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
I know how to query shadow dom element in <style> tag,but i want to use data-bind dynamically change the style,data-bind can not be applied in <style> in Polymer,so i should make it happen in js.For example,i use core-scroll-header-panel component, i can query its background style using:
<style>
core-scroll-header-panel::shadow #headerBg {
background: #5cebca;
}
</style>
but how can implement it in js?
Here's the way to select your element:
var shadow = document.querySelector('core-scroll-header-panel').shadowRoot;
var header = shadow.querySelector('#headerBg');
Note that it will return one single element. If you need to loop over multiple element you may use querySelectorAll as you probably know.
You can then change your background color as normal:
header.style.backgroundColor = "#5cebca";
However, changing a color in directly in JavaScript is not adviced and you should use CSS for that.
header.className = "my_css_class";
Note that it will return one single element. If you need to loop over multiple element you may use querySelectorAll as you probably know.
I have tried it out :
document.querySelector('core-scroll-header-panel::shadow #headerBg');
and is there any else solutions?
I'm using zepto.js for my current project which has the same removeAttr() method as jquery has.
i'm applying a margin-top to a bunch of elements – works fine.
var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]');
$apply.css('margin-top', '100px'); //works fine
However I also need to remove it again in a resize-event.
if ( $(window).width() <= 984 ) {
//$apply.removeAttr('style'); //doesn't take effect
$apply.css('margin-top', '0'); //works fine
console.log('< 984');
}
So i'm able to set the margin-top back to 0 but can't completely remove the style attribute from the selector.
Any ideas why? I don't get any erros, it just doesn't take effect.
The correct way to remove it, is by not setting a value when using the .css.
$apply.css('margin-top', ''); // remove property
When a value for a property is empty, that property is removed.
Read more here.
From http://api.jquery.com/css/
Setting the value of a style property to an empty string — e.g.
$('#mydiv').css('color', '') — removes that property from an element
if it has already been directly applied, whether in the HTML style
attribute, through jQuery's .css() method, or through direct DOM
manipulation of the style property. It does not, however, remove a
style that has been applied with a CSS rule in a stylesheet or
element.
So you can use $apply.css('margin-top', '') to remove the margin-top style.
Use .removeClass() to remove all styles from the element.
I would recommend creating a CSS class that you add and remove instead.
This way you can easily modify the margin value in one location and not have to change it in multiple locations.
CSS:
.myMargin { margin-top : 100px; }
JS:
var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]');
$apply.addClass("myMargin");
In the resize event:
if ( $(window).width() <= 984 ) {
$apply.removeClass("myMargin");
console.log('< 984');
}