从“更改样式”按钮调用属性时，我的 JavaScript 不会更改属性。它应该将图像下的所有四个段落更改为不同的样式。任何援助将不胜感激。我觉得好像只是某个地方写错了。
这是我的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<title>Week4-1.html</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="../js/week4-1.js"></script>
<link rel="stylesheet" href="../css/homework.css">
</head>
<body>
<script src="../js/week4-1.js"></script>
<!--Navigation to different links and parts of the website-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">My Rummage Store</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarsExampleDefault" aria-
controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Rummage Items</a>
<a class="dropdown-item" href="#">Unique Items</a>
<a class="dropdown-item" href="#">Love that Ink Pen Company</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Who we are</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Our Vision</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Links</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="../pages/home.html">Home</a>
<a class="dropdown-item" href="../pages/week1-1.html">Week 1-1</a>
<a class="dropdown-item" href="../pages/week1-2.html">Week 1-2</a>
<a class="dropdown-item" href="../pages/week2-1.html">Week 2-1</a>
<a class="dropdown-item" href="../pages/week2-2.html">Week 2-2</a>
<a class="dropdown-item" href="../pages/week3-1.html">Week 3-1</a>
<a class="dropdown-item" href="../pages/week3-2.html">Week 3-2</a>
<a class="dropdown-item" href="../pages/week4-1.html">Week 4-1</a>
<a class="dropdown-item" href="../pages/week4-2.html">Week 4-2</a>
<a class="dropdown-item" href="../pages/week5-1.html">Week 5-1</a>
<a class="dropdown-item" href="../pages/week5-2.html">Week 5-2</a>
<a class="dropdown-item" href="../pages/week6-1.html">Week 6-1</a>
<a class="dropdown-item" href="../pages/week6-2.html">Week 6-2</a>
<a class="dropdown-item" href="../pages/week7-1.html">Week 7-1</a>
<a class="dropdown-item" href="../pages/week7-2.html">Week 7-2</a>
<a class="dropdown-item" href="../pages/week8-1.html">Week 8-1</a>
<a class="dropdown-item" href="../pages/week8-2.html">Week 8-2</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Submit</button>
</form>
</div>
</nav>
<main role="main">
<!--Main jumbotron-->
<div class="jumbotron">
<div class="container">
<h1 class="display-3" style="text-align:center">Rummage Items</h1>
</div>
<!--Card to display a logo-->
<div class="card" style="width: 18rem; color:black">
<img class="card-img-top" src="../images/week2-1logo.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Rummage it</p>
</div>
<!--Button to change paragraph font-->
<p>
<button type="button" onclick="changeStyles();" class="btn btn-primary btn-lg">Change the Style</button>
</p>
</div>
</div>
<!--Improved columns--->
<div class="container-fluid">
<button type="button" onclick="changeStyles();" class="btn btn-primary btn-lg">Change the Paragraph Style</button>
<div class="row">
<div class="col-md-3 home_box_border home_box_corner home_box_shadow home_box_gradient" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Printers</h2>
<img class="img-circle1" src="../images/product4.jpg" alt="print" align="middle">
<p class="week4-1_Printers">The HPSR printer has a direct feed for over 30 different types of paper. Allowing for ultimate utilization. It also showcases the new style of modern printers. Multifunction printers allow for use of communication via fax.</p>
<p><a class="btn btn-secondary" href="#" role="button">Buy for $299.99 »</a></p>
</div>
<div class="col-md-3 home_box_border home_box_corner home_box_shadow home_box_gradient" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Boots</h2>
<img class="img-circle1" src="../images/product3.jpg" alt="boots">
<p class="week4-1_Boots">The new rummage boot collection. Hand crafted leather for the ultimate rummaging experience. Your feet will thank you during your next rummaging expedition! We look forward to helping you try them on. </p>
<p><a class="btn btn-secondary" href="#" role="button">Buy for $69.99 »</a></p>
</div>
<div class="col-md-3 home_box_border home_box_corner home_box_gradient home_box_shadow" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Lamps</h2>
<img class="img-circle1" src="../images/product5.jpg" alt="Lamp">
<p class="week4-1_Lamps">Lamps are a neccesity during night time. This lamp is hand crafted and made from the finest craftsman we could find. You will not regret buying this lamp, adding a nice piece of decor and bringing some brigtness in your life. </p>
<p><a class="btn btn-secondary" href="../pages/week1-2.html" role="button"> Buy for $39.99 »</a></p>
</div>
<div class="col-md-3 home_box_border home_box_corner home_box_gradient home_box_shadow" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Dressers</h2>
<img class="img-circle1" src="../images/product2.jpg" alt="Lamp">
<p class="week4-1_Dressers">Our Dressers are one of a kind. We have so many variations that you can rummage through and find. Purchase on our site or come in today and take a look! Very sturdy and made with some of the best wood you can buy. </p>
<p><a class="btn btn-secondary" href="../pages/week1-2.html" role="button"> Buy for $239.99 »</a></p>
</div>
</div>
</div>
</main>
<!-- Footer Information -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
这是我的js:
function injectStyles(rule) {
var div = $("<div />", {
html: '­<style>' + rule + '</style>'
}).appendTo("body")
}
function changeStyles() {
// alert("Hi");
// injectStyles('p { color: red; }');
injectStyles('.week4-1_Printers { border: 10px solid black; font-weight:
500; color: darkblue; border-radius: 10px; }');
injectStyles('.week4-1_Boots { border:10px solid black; font-weight: 500;
color: darkblue; border-radius: 10px; }');
injectStyles('.week4-1_Lamps { border:10px solid black; font-weight: 500;
color: darkblue; border-radius: 10px; }');
injectStyles('.week4-1_Dressers { border:10px solid black; font-weight: 500;
color: darkblue; border-radius: 10px; }');
}
最佳答案
我会更新
function injectStyles(rule) {
$("head").append('<style>' + rule + '</style>');
}
在头部附加样式。
关于javascript - 如何让Javascript改变样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48722609/