Unable to edit CSS style using Javascript [duplicate] - javascript

This question already has answers here:
Overriding !important style
(11 answers)
Closed 8 years ago.
I have an HTML element that looks like this:
<p style=​"font:​12px verdana !important;​margin:20px !important;​">​…​</p>​
Now at some point I need to edit the margin attribute through Javascript. The code looks something like this:
document.getElementsByTagName('div')[3].getElementsByTagName('p')[0].style.margin='0'
document.getElementsByTagName('div')[3].getElementsByTagName('p')[0].style.marginLeft = '150px'
However, this isn't working. After I check the value of 'margin' and 'marginLeft' before and after the code, the values remain the same. If I use Google developer tools and manually change the Javascript then the issue is resolved. Can anyone tell me why the code above is not changing the value of the style? I also tried using setAttribute but that did not work either.

You can try this with jquery:
$('selector').css('cssText','font:​12px verdana !important;​margin-left:150px !important;');
making of this way, it overrides your inline style, so be careful if you modify your style dinamically

You can use jquery for this its very easy:
$( ".selector" ).css( "background-color","#fff" );
OR you can access your element in this way
var elements = $( "body" ).find("div");
var p = elements[3].find("p");
$p[0].css("margin","0px");
$p[0].css("margin-left","150px");
if you don't want to use jQuery then you first check that you are accessing/selecting the right div and p tag you can alert the length of elements found and check is 3rd element have the one which you want to update?

Related

css attributes all blank javascript [duplicate]

This question already has answers here:
Can jQuery get all CSS styles associated with an element?
(5 answers)
Closed 5 years ago.
I am using jQuery to edit html elements using .each on all off a class. If I try to log any of the attributes then I will just get "" even though I have set the attributes to something in my css file.
Why is this happening? Can the javascript file not access the css attributes?
As I'm unclear whether you mean CSS attributes or DOM element attributes, here's an explanation for both:
To loop through some elements before reading their (in this case value) attributes, you can do this like:
$('.element').each(function(){
console.log( $(this).attr('value') );
});
To loop through some elements before reading their CSS properties, you can do this like:
$('p').each(function(){
console.log( $(this).css('width') );
});
Take a look at the console to see the three elements width being output: https://jsfiddle.net/nrfxn9nb/

jQuery: $(document).on(event, name as selector, function [duplicate]

This question already has answers here:
How can I select an element by name with jQuery?
(14 answers)
Closed 6 years ago.
Sorry if this is too simple, I am new to programming and I stumbled upon this problem. How can I use the name attribute as the selector inside a
$(document).on('click', '#thisisforid', function().. ?
It is well documented that I can use the id and class name by using #idname and .classname but it is nowhere to be found (I tried so hard to search) how to or if I could use the name attribute instead.
Use an Atrribute Selector like this:
$("[name = 'theNameYouWant']");
More CSS Selectors here.
Note: The CSS Selectors are not exclusive features of jQuery. They work everywhere (in CSS files, using document.querySelector ...)
Try this: $(document).on('click', '*[name="3"]', function().. the * should not be necessary in most cases.
You can do it this way.
$( "[name*='man']" ).on('click', function(){
alert("worked!!");
})
You can refer this docs for attribute selection in jQuery
https://api.jquery.com/attribute-contains-selector/

Editing an item's style via JavaScript? [duplicate]

This question already has answers here:
Changing CSS Values with Javascript
(9 answers)
Closed 8 years ago.
I'm looking for help regarding how to edit an object's style in a separate CSS file via JS. For example, if I have an object that I style with #objectid {left: 0%;} in my CSS file, how would I go about changing that left property via JavaScript? I'm aware you can do object.style.property but that hasn't been working for me as of late. What's the most efficient/easy method of doing this? Thanks in advance.
You have to get the element in the DOM
with pure javascript:
document.getElementById('objectid').style.left = '20%'
With jQuery
$('#objectid').css('left', '20%');
or
$('#objectid').css({'left': '20%'});
The standard way:
document.getElementById('objectid').style.left = "10%";
But if you're worried about efficiency, try not to modify any styles directly using JS... try adding/removing classes instead.
This is correct:
document.getElementById('thing').style.left="5px"
But I believe you need to set the position before it can work, e.g.:
document.getElementById('thing').style.position="absolute";
document.getElementById('thing').style.left="5px"

jQuery - Hide element but maintain the space [duplicate]

This question already has answers here:
Equivalent of jQuery .hide() to set visibility: hidden
(6 answers)
Closed 8 years ago.
Is there any thing similar to the css property and value visibility: hidden in jQuery? The hide function doesn't maintain the space.
If you want the same effect as visiblity: hidden, then use that.
$('some selector').css('visibility', 'hidden');
Or set the opacity to zero, if you're looking for something that you can animate:
$('some selector').animate({'opacity': 0}, 1000);
JQuery is nothing more than a Javascript library, so if you know a way to do something with pure JS, then just do it. You don't have to rely on JQuery to do it. Both JS and JQuery have a way to get a DOM element and change its style attributes. Since Matt provided a JQuery answer, here is how it is done with pure Javascipt:
document.getElementById("id").style.visibility = "hidden";

Jquery unwrap() method? [duplicate]

This question already has answers here:
jQuery : remove element except inside element
(4 answers)
Closed 8 years ago.
There is a great method in jquery called wrap() that will wrap a selected element inside a new element, like so:
Start with:
<p>I wish I was wrapped!</p>
Add code:
$("p").wrap("<div></div>");
End with:
<div><p>I wish I was wrapped!</p></div>
But what I need is something that will unwrap, so that the above process is reversed. It seems that the issue is that when you select a bad item (let's say an unnecessary table) that it always grabs what is inside it as well, so if I want to remove all <td>s, I am left with nothing, since that removed the td and anything inside.
Is there a standard reliable way of removing elements but leaving any children/ancestors alone?
In JQuery 1.4 unwrap() was added:
http://api.jquery.com/unwrap/
A quick Google search reveals that there is such functionality, in the form of a small 576 byte plugin called jqueryunwrap. I have not tried it personally, but it is worth a shot. ;)
$("p").unwrap() will unwrap the wrapping div....................I hope this helps

Categories