位置：通过javascript添加时相对不起作用

时间：2019-04-23 08:46:55

标签： javascript css html5

我正在尝试使用javascript在图像上放置svg。但是，position：relative样式不起作用。我认为这可能是因为样式被样式表覆盖。我有什么想念的吗？

function button() {
    var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
    for (var i = 0; i < evenPic.length; i++) {
        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

        svg.setAttribute("width", "100");
        svg.setAttribute("height", "100");
        svg.setAttribute("position", "absolute");
        svg.setAttribute("top", "0");
        svg.setAttribute("left", "0");
        svg.setAttribute("fill", "yellow");
        svg.setAttribute("opacity", "0.5");
        var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("cx", "30");
        circle.setAttribute("cy", "45");
        circle.setAttribute("r", "31");
        svg.appendChild(circle);
        evenPic[i].appendChild(svg);

    }
}
#container {
    max-width: 400px;
}

header {
    text-transform: uppercase;
    padding-left: 7%
}

ol {
    list-style: none;
}

ol li {
    max-width: 400px;
}

.user {
    margin: 20px;
    padding-left: 20%;
    font-family: arial;
}

.name {
    /*font-weight: bold;*/
    font-size: 120%;
    margin-bottom: 10px;
}

.status {
    font-size: 110%;
    /*font-weight: bold;*/
    margin-bottom: 10px;
}

.avatar {
    position: relative;
}

.avatar img {
    width: 17%;
    padding-top: 4%;
    float: left;
}
<div id="container">
    <header>
        Recent Conversations
    </header>
    <ol id="userList">
        <li>
            <div class="avatar">

                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
            </div>

            <div class="user">
                <div class="name">
                    Finn
                </div>
                <div class="status">
                    I'm a big deal
                </div>
                <div class="message">
                    Listen I've had a pretty messed...
                </div>
                <hr>
            </div>
        </li>
        <li>
            <div class="avatar">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
            </div>
            <div class="user">
                <div class="name">
                    Finn
                </div>
                <div class="status">
                    I'm a big deal
                </div>
                <div class="message">
                    Listen I've had a pretty messed...
                </div>
                <hr>
            </div>

        </li>
        <li>
            <div class="avatar">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
            </div>
            <div class="user">
                <div class="name">
                    Finn
                </div>
                <div class="status">
                    I'm a big deal
                </div>
                <div class="message">
                    Listen I've had a pretty messed...
                </div>
                <hr>
            </div>

        </li>
    </ol>
    <div id="buttons">
        <button id="btn" onclick="button()">Button</button>
    </div>
</div>

使用此代码，在头像旁边创建svg图像。有没有办法在头像上方创建它？

2 个答案:

答案 0 :(得分：2)

position

svg.style.position = "absolute"; 不是HTML或SVG 属性，而是 CSS属性 

Private Sub btnSaveParameters_Click()

    Dim totalParameters As Integer
    totalParameters = ListBox1.ListCount

    Dim lColumn As Long
    Dim addlColumn As Long
    Dim ws As Worksheet
    Set ws = Worksheets("Reference")
    Dim i As Integer
    i = 0
    Do Until i >= Me.ListBox1.ListCount
        MsgBox "The vaue of i is: " & ListBox1.List(i)
        lColumn = ws.Cells(3, ws.Columns.Count).End(xlToLeft).Column
        addlColumn = lColumn + 1
        ws.Cells(3, addlColumn).Value = Me.ListBox1.List(i)
        i = i + 1
    Loop
End Sub

答案 1 :(得分：1)

只需将此CSS添加到.avatar svg即可：

position: absolute;
left: 0;

由于在头像上设置了position: relative，因此您的SVG将放置在头像上。

您实际上可以仅使用CSS而不是SVG来执行此操作（只需通过使用下面的代码创建一个黄色圆圈并将其放置在上面）即可：

<!DOCTYPE html>
<html>

<head>
<style>
    #container {
        max-width: 400px;
    }
    header {
        text-transform: uppercase;
        padding-left: 7%
    }
    ol {
        list-style: none;
    }
    ol li {
        max-width: 400px;
    }
    .user {
        margin: 20px;
        padding-left: 20%;
        font-family:arial;
    }
    .name {
        /*font-weight: bold;*/
        font-size: 120%;
        margin-bottom: 10px;
    }
    .status {
        font-size: 110%;
        /*font-weight: bold;*/
        margin-bottom: 10px;
    }
    .avatar {
        position:relative;
    }
    
    .avatar:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      background: yellow;
      
      /* Using the same width and float as your image */
      /* Forced to set a height using pixels since its parent has no height */
      
      float: left;
      width: 17%;
      margin-top: 4%;
      height: 62px;
      
      opacity: 0;
      transition: opacity 300ms;
    }
    
    .avatar.active:after {
      opacity: 0.5;
    }
    
    .avatar img {
        width: 17%;
        padding-top:4%;
        float: left;
    }
</style>    

</head>

<body>
    <div id = "container">
        <header>
            Recent Conversations
        </header>
        <ol id = "userList">
            <li>
                <div class = "avatar">

                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
                </div>

                <div class = "user">
                  <div class = "name">
                      Finn
                  </div>
                  <div class = "status">
                      I'm a big deal
                  </div>
                  <div class = "message">
                      Listen I've had a pretty messed...
                  </div>
                  <hr>
                </div>
            </li>
            <li>
                <div class = "avatar">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
                </div>
                <div class = "user">
                  <div class = "name">
                      Finn
                  </div>
                  <div class = "status">
                      I'm a big deal
                  </div>
                  <div class = "message">
                      Listen I've had a pretty messed...
                  </div>
                  <hr>
                </div>

            </li>
            <li>
                <div class = "avatar">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
                </div>
                <div class = "user">
                  <div class = "name">
                      Finn
                  </div>
                  <div class = "status">
                      I'm a big deal
                  </div>
                  <div class = "message">
                      Listen I've had a pretty messed...
                  </div>
                  <hr>
                </div>

            </li>
        </ol>
        <div id = "buttons">
          <button id="btn" onclick="button()">Button</button>
        </div>
    </div>

</body>

<script>
    function button(){
        var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
        for(var i=0; i<evenPic.length; i++){
            evenPic[i].classList.add("active");
        }
    }
</script>

</html>

相关问题
最新问题