Question

我的目的是通过绿色或任何其他颜色制作边框颜色。在我的情况下，我只使用了颜色边框，但我想使用相同的方法填充颜色到css属性的值，如Photoshop工具＆＃39; Paint Bucket＆＃39; 例如，如果转到浏览器并检查代码，您将看到它左侧的缩进＆nbsp; css：margin left：15px。因此，我需要使用此属性并按颜色填充。

＆＃13;

$(document).ready(function () {
    $('p').each(function (index, el) {
        if ($(this).css('marginLeft') === '15px'){
            $(this).css({borderLeftStyle: "solid",
            borderLeftColor: "green"
            })
        }
    });
});

//Things to replace:

//Replace ".p" with your selector.
//Replace CSS property and value with what you are looking for.
//Replace "css()" with what you want to execute on that //found element.

＆＃13;

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*/

＆＃13;

<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>

＆＃13;

编辑：来自答案而不是编辑的示例图像。

Margin indentation 它左右角之间的空间。我想要而不是＆＃34; margin＆＃34;用颜色来填充或填充这个区域。

Answer 1

您无法仅更改一侧的边距颜色。由于您已经使用左边框添加绿色，因此可以使边框15px变厚并删除边距：

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

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>

或者，如果要保留绿色边框并在其左侧添加其他颜色，可以向p添加容器，并将其背景颜色设置为所需的颜色。不要忘记将原始背景颜色设置为p，否则将采用其容器的背景颜色：

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

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>
    <div>
      <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>
    </div>
  </article>
</section>
<html>

注意：上面的两个解决方案都可以在纯CSS中完成，但我按照你在jQuery中的方式进行操作。如果你愿意，也可以用jQuery而不是HTML添加第二个解决方案的容器。

如何更改css属性＆＃39; margin-left＆＃39;在属性上使用整数值，字符串值为＆＃34; color＆＃39;使用Jquery或JS

1 个答案: