Question

我有这个样式表

#navigation {
  float: left;
  white-space: nowrap;
  font-size: 12px;
  font-weight:bold;
}

#navigation ul {
  list-style-type: none;
  padding-top: 30px;
}

#navigation ul li {
  float: left;
  display: inline;
  border-right: solid 1px #5f5f5f;
  padding-right: 8px;
  margin-right:8px;
}

这是HTML

      <div id="navigation" >
            <ul dir="rtl">
                <li>
                    <asp:LinkButton ID="LinkButtonRegister" runat="server" Visible="true" CausesValidation="False"
                        PostBackUrl="~/Register.aspx">הרשמה</asp:LinkButton>
                </li>
                <li>
                    <asp:LinkButton ID="LinkButtonLogin" runat="server" Visible="true" CausesValidation="False">התחבר</asp:LinkButton>
                </li>
                <li>
                    <asp:LinkButton ID="LinkButtonLogout" runat="server" Visible="false" OnClick="ButtonLogOut_Click"
                        CausesValidation="False">התנתק</asp:LinkButton>
                </li>
                <li>
                    <asp:LinkButton ID="LinkButtonMyAccount" runat="server" Visible="false" CausesValidation="False"
                        PostBackUrl="~/MyAccount.aspx">אזור אישי</asp:LinkButton>
                </li>
              </ul>
            </div>

如何将“#navigation ul li”'float'属性更改为'right'？

我可以用javascript-到达div导航 documnet.getelementbyid（“navigation”），但不知道如何进入样式表中定义的每个li的样式

Answer 1

您应该在样式表中执行此操作，但如果您无权访问，则可以使用类似于以下内容的JavaScript：

// get all of the DOM nodes which match the selector
var nodes = document.querySelectorAll("#navigation ul li");
// loop through all of the nodes
for (var i = 0; i < nodes.length; i++) {
  // set the style
  nodes[i].style.float = "right";
}

注意：document.querySelectorAll仅适用于现代浏览器（Chrome，Safari，FF，IE9 +）。

Answer 2

绝对可以添加动态样式表：

var sheet = document.createElement('style')
sheet.innerHTML = "#navigation ul li {float: right;}";
document.body.appendChild(sheet);

Answer 3

在vanilla JS中，首先需要使用 getElementById 获取导航元素，然后使用 getElementsByTagName 获取所有列表项。然后，遍历列表项，您可以设置 element.style.float ：

var nav = document.getElementById("navigation"),
    lis = nav.getElementsByTagName("li"),
    l = lis.length,
    i = 0;
for (i; i < l; i++) { 
    lis[i].style.float = "right";
}

Answer 4

您想要这样的输出Check the example

JavaScript

document.getElementById("navigation").style.cssFloat = "right";

在Body标签内

  <div id="navigation" >
        <ul dir="rtl">
            <li>
                <asp:LinkButton ID="LinkButtonRegister" runat="server" Visible="true" CausesValidation="False"
                    PostBackUrl="~/Register.aspx">הרשמה</asp:LinkButton>
            </li>
            <li>
                <asp:LinkButton ID="LinkButtonLogin" runat="server" Visible="true" CausesValidation="False">התחבר</asp:LinkButton>
            </li>
            <li>
                <asp:LinkButton ID="LinkButtonLogout" runat="server" Visible="false" OnClick="ButtonLogOut_Click"
                    CausesValidation="False">התנתק</asp:LinkButton>
            </li>
            <li>
                <asp:LinkButton ID="LinkButtonMyAccount" runat="server" Visible="false" CausesValidation="False"
                    PostBackUrl="~/MyAccount.aspx">אזור אישי</asp:LinkButton>
            </li>
          </ul>
        </div>

css代码

#navigation {
  float: left;
  white-space: nowrap;
  font-size: 12px;
  font-weight:bold;
}

#navigation ul {
  list-style-type: none;
  padding-top: 30px;
}

#navigation ul li {
  float: left;
  display: inline;
  border-right: solid 1px #5f5f5f;
  padding-right: 8px;
  margin-right:8px;
}

Answer 5

使用此功能：

function style(selector, cssStyle, final) {           // make a style function with paramaters: selecctor (the selector you want to style e.g '.test'), cssStyle (the style you would like to change e.g. 'fontFamily'), and final (e.g 'Arial, Helvetica, sans-serif')
  const elems = document.querySelectorAll(selector);  // actually get the elements
  for (const elem of elems) {                         // loop through all the elements
    elem.style[cssStyle] = final;                     // change the element's style of cssStyle to final using square brackets (e.g.({ test: true })['test'] outputs true)
  }
}
/**
  * Example:
  * Style all h1s' font family to Arial, Helvetica, sans-serif:
  */
    style(
      'h1',
      'fontFamily',
      'Arial, Helvetica, sans-serif'
    );
/**
  * Style all ps' background image to linear-gradient(to bottom right, red, yellow):
  */
    style(
      'p',
      'backgroundImage',
      'linear-gradient(to bottom right, red, yellow)'
    );
/**
  * You get it, its pretty cool
  * For your situation:
 */
    style(
      '#navigation ul li',
      'float',
      'right'
    )

Answer 6

如果你想动态改变（你在问题中有“javascript”标签），请将其放入你的javascript中（在所需的事件上）

$("#navigation ul li").css("float", "right");

我假设你有Jquery！

用javascript更改css样式

6 个答案: