• 0

[Javascript] Change CSS Attribute

Asked by Axel,

 Share

Question

Grand Master

Axel

Posted
Posted

Hi there.

I've managed to change the padding of an element using javascript. I changed:

#content {
border-right: 1px solid #e6e6e6;
margin: 0 -31px -9999px -5.1%;
padding: 106px 30px 9999px 5.1%;
background: #fff url(../images/bg-content.gif) repeat-y;
position: relative;
z-index: 2;
}

using:

document.getElementById("content").style.padding = "106px 0px 9999px 0%";

How would I go about changing a css attribute that's a class?

i.e.:


.post p {margin: 0;}

Link to comment
https://www.neowin.net/forum/topic/1134314-javascript-change-css-attribute/
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Experienced

winlonghorn

Posted
Posted

Hi there.

I've managed to change the padding of an element using javascript. I changed:

#content {
border-right: 1px solid #e6e6e6;
margin: 0 -31px -9999px -5.1%;
padding: 106px 30px 9999px 5.1%;
background: #fff url(../images/bg-content.gif) repeat-y;
position: relative;
z-index: 2;
}

using:

document.getElementById("content").style.padding = "106px 0px 9999px 0%";

How would I go about changing a css attribute that's a class?

i.e.:


.post p {margin: 0;}

You could get all child elements of ".post" using the jquery children function and set the values using the css function. :) Here is an example:


//jquery example
$(".post").children().css('padding', '106px 0px 9999px 0%');
[/CODE]

  • 0
Grand Master

Axel

Posted
  • Author
Posted

Sorry I'm not familiar with how to use jquery but I know jquery.js is included in the head of the document.

At the moment I've added this into the body of a post:


<script>
function myFunction() {
document.getElementById("content").style.padding = "106px 0px 9999px 0%";
}
</script>


<button onclick="myFunction();">click</button>

This changes the padding in the matching css #content rule.

I want to change .post p {margin: 0;} to .post p {margin-right: -50px;}

  • 0
Experienced

winlonghorn

Posted
Posted

Sorry I'm not familiar with how to use jquery but I know jquery.js is included in the head of the document.

At the moment I've added this into the body of a post:


<script>
function myFunction() {
document.getElementById("content").style.padding = "106px 0px 9999px 0%";
}
</script>


<button onclick="myFunction();">click</button>

This changes the padding in the matching css #content rule.

I want to change .post p {margin: 0;} to .post p {margin-right: -50px;}

I actually made one mistake in my example code. The children function call should look like this: ".children('p')". What you would do is modify your javascript function as shown below:


<script>
	function myFunction() {
		document.getElementById("content").style.padding = "106px 0px 9999px 0%";
	   $(".post").children('p').css('margin-right', '-50px');
	}
</script>
[/CODE]

So you would basically just add the line of code that I gave you below the existing line of code in your javascript function.

  • 0
Grand Master

Axel

Posted
  • Author
Posted

Thanks for your reply.

Unfortunately I get this error if I run the code:



Uncaught TypeError: Property '$' of object [object Window] is not a function
myFunction
onclick

this is in the head:

&lt;script type="text/javascript" src="https://website.com/wp-content/themes/yerba/js/jquery.main.js"&gt;&lt;/script&gt;

Could there be another way to do this?

If I add 

&lt;style&gt;.post p {margin-right: -50px;} &lt;/style&gt;

to the bottom of the <head>

it adds the proper margin to the element.

Trouble is it occurs across the whole wordpress site. I only want it to load upon a certain page

I tried adding:

&lt;script&gt;

if (document.title == "Contact Us") {
document.write("&lt;style&gt;.post p {margin-right: -50px;} &lt;/style&gt;");
}
&lt;/script&gt;

to the end of the head section but that doesn't work. I may be using it incorrectly though. Very new to js.

  • 0
Experienced

winlonghorn

Posted
Posted

Thanks for your reply.

Unfortunately I get this error if I run the code:



Uncaught TypeError: Property '$' of object [object Window] is not a function
myFunction
onclick

this is in the head:

&lt;script type="text/javascript" src="https://website.com/wp-content/themes/yerba/js/jquery.main.js"&gt;&lt;/script&gt;

Could there be another way to do this?

If I add

&lt;style&gt;.post p {margin-right: -50px;} &lt;/style&gt;

to the bottom of the <head>

it adds the proper margin to the element.

Trouble is it occurs across the whole wordpress site. I only want it to load upon a certain page

I tried adding:

&lt;script&gt;

if (document.title == "Contact Us") {
document.write("&lt;style&gt;.post p {margin-right: -50px;} &lt;/style&gt;");
}
&lt;/script&gt;

to the end of the head section but that doesn't work. I may be using it incorrectly though. Very new to js.

No problem at all! :) Ok, it may not be properly accessing jquery in that case. Try changing this line:


<script type="text/javascript" src="https://website.com/wp-content/themes/yerba/js/jquery.main.js"></script>
[/CODE]

To this:

[CODE]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
[/CODE]

Here is a link to describe additional issues that could cause the error message that you are seeing (just in case my solution fails for some reason): http://stackoverflow...-not-a-function

  • 0
Grand Master

Axel

Posted
  • Author
Posted

Thanks buddy. I'm packing up for today and my heads spinning focusing on such a simple problem for so long.

I've solved it presently using php:


&lt;?php
$currentpageurl=$_SERVER['REQUEST_URI'];
if ($currentpageurl = "/contact-us/") {
echo "&lt;style&gt;#content {padding: 106px 0px 9999px 0%} .post p {margin-right: -50px;}&lt;/style&gt;";
}
?&gt;

Wish I'd thought of that first thing!

  • 0
Experienced

winlonghorn

Posted
Posted

Thanks buddy. I'm packing up for today and my heads spinning focusing on such a simple problem for so long.

I've solved it presently using php:


&lt;?php
$currentpageurl=$_SERVER['REQUEST_URI'];
if ($currentpageurl = "/contact-us/") {
echo "&lt;style&gt;#content {padding: 106px 0px 9999px 0%} .post p {margin-right: -50px;}&lt;/style&gt;";
}
?&gt;

Wish I'd thought of that first thing!

You are very welcome! :) I don't blame you at all. Working on problems like this for so long can bring headaches very easily. I know from past experience. lol. Also, just in case you want to use jquery in the future, I found another link that may help. I noticed from your code that you may be using wordpress. If so, the following link should be helpful for future use: http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Save 35% on Sony's SS-CS5M2 3-way high-res bookshelf speakers

      By TarasBuria · Posted

      Save 35% on Sony's SS-CS5M2 3-way high-res bookshelf speakers by Taras Buria Sony is currently offering a big discount on its SS-CS5M2 bookshelf speaker, saving you 35% on a set of high-quality audio equipment. The SS-CS5M2 is a passive 3-way bookshelf speaker with a 5.12-inch woofer, a 25 mm soft-dome tweeter, and a 19 mm super tweeter. This design allows different drivers to handle different parts of the sound spectrum for a clearer, more detailed audio when watching movies or listening to music. The compact cabinet size allows you to place these speakers on shelves, desks, or stands, making them a practical choice for apartments, bedrooms, and small living rooms. Despite its compact size, the SS-CS5M2 delivers up to 100 W of power. Note that since the speakers are passive, you will need an amplifier to drive them. However, if you do, you can use them for high-resolution music, thanks to a claimed frequency response of 53 Hz - 50 kHz. It is able to extend so far high in the spectrum as a result of those super tweeters. While they will work with most amplifiers and AV receivers, Sony says this pair is a perfect match for its AV receivers, such as STRDH190, 590, 790, or 1000. Sony CS Bookshelf Speakers SS-CS5M2 3-Way 3-Driver Hi-res - $178 | 36% off on Amazon US This Amazon deal is US-specific and not available in other regions unless specified. This is a first-party seller link (at the time of article publishing); ensure that you also purchase from a first-party seller link only. If you don't like it or want to look at more options, check out the previous deals that we have covered, OR you can also visit Amazon US deals page. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • EU Commission explains why Siri AI isn't launching in the EU, and Apple is to blame

      By AltecXP · Posted

      So they somehow expect Apple to easily make it so that if I install say DeepSeek that DS can then handle all the tasks that Siri would be doing while integrated in the OS? That sounds like just rediculous.
    • AMD 9070XT

      By Mockingbird · Posted

      For ray-tracing, the Radeon RX 9070 XT is better than the GeForce RTX 5070, but worse than the GeForce RTX 5070 Ti The Radeon RX 9070 XT is similar to the GeForce RTX 5070 Ti in rasterization Both AMD and NVIDIA have had serious issues with drivers in the past, so I can't say that one is better or worse than the other. Yes. AMD has better support Linux than does NVIDIA. Use Display Driver Uninstaller (DDU) to uninstall NVIDIA's drivers before installing AMD's drivers. That's up to you. Supplies of memory is unpredictable because AI using up a lot of memory. As a result, there is a lot of volatility in video card prices.
    • Should Microsoft be forced to stop promoting Edge over other browsers?

      By +Nik Louch · Posted

      Promoting is fine - advertising, informing, whatever.  But interrupting your PAID OS experience is not.
    • Politically funny images of the World

      By snowy owl · Posted

  • Popular Contributors

    1. 1
      +primortal
      510
    2. 2
      PsYcHoKiLLa
      215
    3. 3
      +Edouard
      145
    4. 4
      Steven P.
      88
    5. 5
      ATLien_0
      83
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!