• 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

    • Microsoft wants to end printer driver headaches with Windows Ready Print

      By Usama Jawad96 · Posted

      Microsoft wants to end printer driver headaches with Windows Ready Print by Usama Jawad A few days ago, Microsoft released Windows 11 Experimental build 26300.8553, bringing a ton of enhancements such as Start menu customization, search improvements, Taskbar polish, and other minor UI tweaks. Another relatively major enhancement snuck deep within the change log was related to upgrades to the Windows printing experience. Now, Microsoft has shared more details about these benefits. For starters, Microsoft has renamed its Modern Print Platform to Windows Ready Print. The company believes that this name highlights its shift in strategy, which now focuses on modernizing, securing, and streamlining the printing experience for Windows devices. Some of the upgrades present in Windows Ready Print have already been seeded to customers and partners. This includes ending support for third-party printer drivers via Windows Update and transitioning towards the Internet Printing Protocol (IPP) and the native Windows IPP printer driver. In line with these changes, new printer installations will default to Windows Ready Print on eligible devices starting from July 2026. However, Microsoft recognizes that not all environments will be able to migrate to this platform immediately, so it will allow users to choose between installing the printer via Windows Ready Print or the traditional OEM process. Users will be able to toggle this configuration through Settings > Bluetooth & Devices > Printers & Scanners > Printer preferences. This control applies only to new printer installations, and its functionality can also be modified via Group Policy as follows: Launch Group Policy Editor Navigate to Local Computer Policy -> Administrative Templates -> Printers Find and select 'Configure Windows Ready Print driver ranking' -> double click to open it Select 'Enabled' (if you wish to enable Windows Ready Print driver selection) or 'Disabled' (if you wish to explicitly disable Windows Ready Print driver selection). Select Apply Select OK Similarly, if you set up Windows protected print mode through the same setting in Windows 11, it will also default to using Windows Ready Print exclusively. Microsoft hopes that these improvements will help eradicate dependency on OEM-specific driver installation processes and simplify printer installations. We'll likely find out more about other tangible benefits in the coming months.
    • Proton releases Proton Drive CLI for Windows, Mac, and Linux

      By IATW · Posted

      Hey what's about the proton vpn firefox extension ? It's not working today
    • AMD 9070XT

      By Steven P. · Posted

      On what though? Not Ray Tracing.
    • Paint.NET can finally be downloaded from the "right" place

      By Steven P. · Posted

      Agreed, but now my muscle memory immediately creates a layer for each text portion, so editing is made a little easier.
    • Paint.NET can finally be downloaded from the "right" place

      By Steven P. · Posted

      Happy for him, it is one of the first apps I install on a new Windows machine, been using it for years!

  • Recent Achievements

    • One Year In
      Primer1st earned a badge
      One Year In
    • Experienced
      JayZJay went up a rank
      Experienced
    • Reacting Well
      Sir_Timbit earned a badge
      Reacting Well
    • Week One Done
      rubentuben8 earned a badge
      Week One Done
    • Week One Done
      ARaclen earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      514
    2. 2
      PsYcHoKiLLa
      229
    3. 3
      Edouard
      137
    4. 4
      ATLien_0
      87
    5. 5
      Steven P.
      81
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!