• 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
  On 02/02/2013 at 13:39, Axel said:

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
  On 02/02/2013 at 15:02, Axel said:

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"></script>

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("<style>.postargin-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
  On 02/02/2013 at 15:34, Axel said:

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"></script>

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("<style>.postargin-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
  On 02/02/2013 at 16:06, Axel said:

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

    • 128GB and 256GB Samsung Galaxy Tab S10 FE are selling at their lowest prices once again

      By devHead · Posted

      I have the Tab A9+ also, and I agree with all your points. I really like this tablet.
    • Microsoft: Windows 11 24H2 is our most reliable version of Windows yet

      By Caboose447 · Posted

      Sounds like a problem with your Surface.
    • Windows 11 24H2 gets big feature update with improved Settings, new BSOD, and more

      By +sphbecker · Posted

      Microsoft changed recall to opt-in some time ago, which seems to still be the case. I personally feel like that is the right move for something like this. You are right, settings that turn themselves back on after an update is totally unacceptable; its weird how that only happened with privacy and advertising related settings...
    • 128GB and 256GB Samsung Galaxy Tab S10 FE are selling at their lowest prices once again

      By TRS-80 · Posted

      I have a Tab S9 FE and a Tab A9+ which is a lot less expensive. I much prefer the TabA9+. 1. Its display is more landscape while that of the S9 FE is more boxy. 2. They both drain battery at about the same rate of between 7% and 9% an hour depending on how I use them 3. The Tab A9+ charges a lot faster than S9 FE, The S9 FE is better at handling memory, It is faster. They both have 8GB. The TabA9+ does a lot better at handling memory on Android 15, One UI 7.0 than it did on Android 14, One UI 6.1
    • Following rough launch, Splitgate 2 is going back to beta as studio announces layoffs

      By LoneWolfSL · Posted

      Following rough launch, Splitgate 2 is going back to beta as studio announces layoffs by Pulasthi Ariyasinghe The sequel to the free-to-play arena shooter Splitgate was released just a couple of months ago alongside a surprise Battle Royale mode, but it doesn't look like the launch has gone too well for the studio, 1047 Games. In a lengthy social media post, the developer revealed that it is making some major changes within the company that will also affect its games. The studio said that it agrees with the community regarding Splitgate 2 launching too early with rushed features. Because of this, the title is returning to its beta state. While Splitgate 2 will remain playable, the studio will be deep in development reworking the title behind the scenes until at least early 2026. The soon-landing Season 3 content update is still planned for release. "We're returning not just to our roots in what we build, but in how we build it – with you," said the company. "That means more playtests, more surveys, more listening, and truly being community first. Our goal is to combine the DNA of the first game with the best improvements from the second." The studio also revealed that this shakeup means that it had to cut some team members from the studio. It didn't give an exact number for the roles being cut but said that "we hope to bring them back when we can." In the same vein of keeping costs low, 1047 Games will be shutting down the servers for the original Splitgate within a month's time. "While we'd love to keep servers online indefinitely, it's cost us hundreds of thousands of dollars over the past couple of years, and we have to prioritize our team," added the studio. It said that offline play or peer-to-peer matchmaking for Splitgate are being explored for fans to keep playing, but nothing concrete about these potential options was announced today.

  • Recent Achievements

    • Week One Done
      SmileWorks Dental earned a badge
      Week One Done
    • Community Regular
      vZeroG went up a rank
      Community Regular
    • Collaborator
      Snake Doc earned a badge
      Collaborator
    • Week One Done
      Snake Doc earned a badge
      Week One Done
    • One Month Later
      Johnny Mrkvička earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      587
    2. 2
      Michael Scrip
      199
    3. 3
      ATLien_0
      193
    4. 4
      +FloatingFatMan
      132
    5. 5
      Xenon
      122
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!