使用 javascript 更改 css 样式

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-documnet.getelementbyid("navigation") 访问 div 导航，但不知道如何进入样式表中定义的每个 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

你想要这样的输出检查例子

JavaScript

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

身体内部标签

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

当然你可以添加动态样式表：

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

Answer 4

在香草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 5

使用这个功能：

 function style(selector, cssStyle, final) { // make a style function with paramaters: selecctor (the selector you want to style eg '.test'), cssStyle (the style you would like to change eg 'fontFamily'), and final (eg '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 (eg({ 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！