Tips for modifying the 'margin-left' CSS attribute to an integer value on a property that currently holds a string value like 'color' using jQuery or JavaScript

I am looking to change the border color to green or any other color. I have already set the border color, but now I want to fill it with a color by using a method similar to the 'Paint Bucket' tool in Photoshop.

$(document).ready(function () {
    $('p').each(function (index, el) {
        if ($(this).css('marginLeft') === '15px'){
            $(this).css({borderLeftStyle: "solid",
            borderLeftColor: "green"
            })
        }
    });
});

//Details to update:

//Change ".p" to your desired selector.
//Update CSS property and value accordingly.
//Modify "css()" with your preferred action on that element.
body{
    font-family: 'Roboto Condensed', Helvetica, sans-serif;  }

.wrap{
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: auto;
}

section{
    grid-column-start: 2;
    grid-column-end: 3;
}

article{
    background-color: #f8f8f8;
}

img{
    max-width: 50%;
    height: auto;
    margin: 10px 5px 10px 5px;
}

time{
    font-family: Menlo, Monaco, monospace;
    display: block;
    color: #beaaae;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 200;
    margin: 0 0 15px 0;}

h2{
    margin-bottom: 2px;  }
p{
    margin-left: 15px;
    line-height: 25px;  } /*TODO: space between text*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<section>
        <article>
            <h2>Connect GitHub to the project</h2>
            <time class="time">January 11 2018</time>
            <p><strong>Notice:</strong> Registration on website <code>https://github.com/</code><br>
                Go to the setting of IDE select bookmark <em>GitHub</em> input personal data in given field.<br>
                Where's <em>Host</em> it's <code>github.com</code> and <em>password</em> it's password on website/<br>
                Then press <em>Test</em> for successful connection to website.
            </p>
        </article>
    </section>
<html>

UPDATE: Instead of margin-editing, consider adding color to this area instead.

Margin indentation This is the space between the left corner and right side. I would like to replace the "margin" with a colored fill in this area.

Answer №1

Modifying the margin color of just one side isn't possible on its own. Given that you've already utilized the left border for a green hue, consider thickening the border by 15px and eliminating the margin:

$(document).ready(function() {
  $('p').each(function(index, el) {
    if ($(this).css('marginLeft') === '15px') {
      $(this).css({
        borderLeftStyle: "solid",
        borderLeftColor: "green",
        borderLeftWidth: '15px',
        marginLeft: '0'
      })
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<section>
  <article>
    <h2>Connect GitHub to the project</h2>
    <time class="time">January 11 2018</time>
    <p><strong>Notice:</strong> Registration on website <code>https://github.com/</code><br> Go to the setting of IDE select bookmark <em>GitHub</em> input personal data in given field.<br> Where's <em>Host</em> it's <code>github.com</code> and <em>password</em> it's password on website/<br> Then press <em>Test</em> for successful connection to website.
    </p>
  </article>
</section>
<html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to establish a connection to a particular database and collection within the MongoDB Atlas Cluster

I am in the process of developing a MERN stack application and have opted to utilize mongoose for communication with MongoDB Atlas. However, I am facing difficulty in understanding how to connect to a specific database and collection within MongoDB Atlas d ...

Adjust the clarity of the elements within my HTML document

I have been working on creating a login page that will appear in front of the main webpage. Through my online research, I discovered a technique to blur the main webpage background until the user logs in. Below is the code snippet: HTML: <div id="logi ...

I find it curious that I need to include the bootstrap link in the body of the HTML file rather than in the head, unlike the bootstrap

Check out the Bootstrap documentation here which states that we should add the link at the end of the body just before its closing tag. As a newcomer, I've noticed linking being done in the head section for non-bootstrap codes, leading me to feel a bi ...

Top method for transitioning FontAwsome stars class from regular to solid

How can I dynamically change the class of 5 stars of FontAwesome Icons from regular to solid based on a numeric variable level that ranges from 0 to 5? <template> <div id="five-stars"> <font-awesome-icon v-for="(inde ...

Having trouble with CSS Pseudo-element not functioning properly in React when implementing relative and absolute positioning techniques

.contact-icon{ height: 10vw; width: 10vw; box-shadow: white 0 0 5px; position: relative; } .contact-icon:before{ content: " "; top:0; position: absolute; height: 12vw; width: 12vw; background-c ...

Poor text display quality on Internet Explorer

Are there any solutions to improve font display on Internet Explorer for Windows? font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; Check out this 100% crop comparison: Left: IE Right: FF ...

Is there an issue with MVC5 in passing JSON data to Controller using Ajax?

I am working on implementing duplication checking in my MVC5/EF Code-First application. In the Asset View's Create() method, I use JavaScript to show/hide textboxes for adding a new location_dept/location_room: <div class="form-group"> ...

Position the link to the right of the menu using CSS styling

I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and lin ...

The onClick function is called when I fail to click the button within a React form

I set up a form and I would like to have 2 ways to submit it: One by filling out the input field and pressing enter One by recording voice (using the react-speech-recognition library) However, after adding the second way, the input fi ...

Step-by-step guide to create an impressive autocomplete search box with jQuery UI

I'm currently using jQuery UI for autocomplete in my search box. So here's the array that I am passing from the controller to the view, which contains the JS. public function suggest_channel(){ $this->load->library('mcurl&apo ...

Exploring and accessing the properties of objects in JavaScript

While attempting to access the email and password fields, an unexpected '0' seems to have appeared. The object retrieved from RethinkDB appears fine without this '0'. However, when using Lodash's _.assign() method like so: var use ...

What impact does the addition of wp-blog-header.php have on the file path?

Recently, I've been working on a piece of JavaScript code: <script type="text/javascript"> $('.publish_post').click (function(){ var info = 'some info'; ...

Matching patterns with regular expressions in Javascript

There's a string that goes like this: |Africa||Africans||African Society||Go Africa Go||Mafricano||Go Mafricano Go||West Africa|. I'm attempting to craft a regular expression that will only match terms containing the word Africa or any variation ...

Scroll bars on JQuery UI dialog

When using the jquery UI Dialog modal, everything appears correctly in Firefox and Chrome. However, in IE8, scroll bars suddenly appear. Is there a way to remove them? ...

Violation of Content Security Policy directive has occurred

During my full-stack project development, I encountered an issue with the inclusion of the bundle.js file in my base HTML file using a simple script tag. When trying to render the page and utilize the JS functionality, I faced a content security policy vio ...

Error encountered when generating bower.json due to absence of version number

After generating the bower.json file, I noticed that the version number was not included in the information collected. The current content is as follows: { "Name": "conFusion", "Authors": [ "Aurora" ], ... } Although the version n ...

Error Handling with PHP's die() Command

There seems to be an issue that I am facing with the die() commands. On my website, I have a member registration page which includes a form. The form's action leads to another PHP script. However, when the form is submitted, instead of displaying an a ...

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

Selectors that can be applied to multiple IDs with identical functions

I have a script for popups that I want to be able to use multiple instances of. For example, I would like to have 5 popups on one page without having to change the JavaScript code. While everything in the script works fine, I am struggling to make it work ...

Interactive rows in a table with Bootstrap dropdowns

I am facing an issue while trying to incorporate a Bootstrap select field in my dynamic table. The table fetches data dynamically from another field, but I am struggling to handle the situation when more than one row is added. I think I need to assign the ...