个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个测试，使用 Javascript 和 CSS 来更改组合框的文本样式。但是，我只是发现这个网站的字体类型发生了变化，我从谷歌那里什么也没得到。这是我的代码:
var changeFont = function(font) {
console.log(font.value)
document.getElementById("output-text").style.fontFamily = font.value;
}.tebal {
font-family: Verdana;
font-size: 12px;
color: blue;
font-weight: bold;
}
.miring {
font-family: Verdana;
font-size: 12px;
color: blue;
font-weight: italic;
}<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<div class="jumbotron text-center">
<h3>Text Style Changed with combobox</h3>
</div>
<div class="text-center" id="output-text">
Hello Guys
</div>
<div class="text-center">
<select id="input-font" class="input" onchange="changeFont (this);">
<option value="Times New Roman" selected="selected">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="algerian">Algerian</option>
<option value="berlin sans fb">Berlin Sans FB</option>
<option value="bold" class="bold">Tebal</option>
<option value="miring" class="miring">Miring</option>
<option value="" class="">Style1</option>
<option value="" class="">Style2</option>
<option value="" class="">Style3</option>
</select>
</div>我想让它像这样This (Photo)每次我从组合框更改样式，样式文本都会更改，但我找不到如何制作它的示例以及我的代码有什么问题。请帮我解决这个代码:(，谢谢。
注意:这是我照片的翻译 - ini 文本 berubah sesuai css = 此文本根据 css 更改 - tebal = 粗体 - Miring = 斜体 - bingkai=框架
最佳答案
我认为为每种字体定义类会更简单。然后将类名放入选项值中。有了这个，如果您需要向文本添加其他样式(不仅是字体系列，还可以向类添加颜色或其他任何内容)，它将更加灵活这是您的案例的示例
var changeFont = function(font) {
console.log(font.value)
document.getElementById("output-text").className = "text-center " + font.value;
}.bold {
font-family: Verdana;
font-size: 12px;
color: blue;
font-weight: bold;
}
.miring {
font-family: Verdana;
font-size: 12px;
color: blue;
font-style: italic;
}
.Arial{
font-family: Arial;
}
.Algerian{
font-family: Algerian;
}
.Berlin-sans-fb{
font-family: 'Berlin sans fb';
}
.Times-new-roman{
font-family: 'Times New Roman';
}<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h3>Text Style Changed with combobox</h3>
</div>
<div class="text-center" id="output-text">
Hello Guys
</div>
<div class="text-center">
<select id="input-font" class="input" onchange="changeFont (this);">
<option value="Times-new-roman" selected="selected">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="Algerian">Algerian</option>
<option value="Berlin-sans-fb">Berlin Sans FB</option>
<option value="bold" class="bold">Tebal</option>
<option value="miring" class="miring">Miring</option>
<option value="" class="">Style1</option>
<option value="" class="">Style2</option>
<option value="" class="">Style3</option>
</select>
</div>关于javascript - 通过选项下拉 Javascript 更改字体样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61346313/
25
4
0
你知道更好的写法吗 font = font ? font : defaultFont; 我所知道的是: if(!font) { font = defaultFont } 我知道这是一个小工具问
我正在编写代码，但无法编译，即使类(字体)已通过 import javafx.scene.text.*; 导入我知道这个方法font包含在字体中。 这是我的代码: package helloworld
我已经构建了一个按钮，但在格式设置(即平方、内联文本等)方面遇到了问题 我目前的问题是:正文分为2部分- 上线正常-下一行是较大的字体大小 我的动画 react 正确，但文本应该在箭头的顶线和底线内。
好的，所以我想在网页上使用固定系统作为字体。我可以使用 Cufon，但我希望人们能够在鼠标悬停时选择文本并复制它。 有人有什么吗？ 最佳答案 我使用 fontsquirrel 的 @font-face
我找到了 iOS 4.2 可用字体列表(链接 here )，但该列表与早期版本的 SDK 略有不同(链接 here )。 我可以很好地更改代码中的字体，但如果我使用 iOS 4.2 列表中可用的字体，
我正在尝试更改 TableView 标题上的字体颜色，其中显示“加利福尼亚/纽约”。我该怎么做？ 在黑色背景上，文本需要是白色的，但无法弄清楚这一点。 谢谢 最佳答案 如果您尝试更改标题颜色，可以使用
假设我想使用 java.awt.Graphics.drawString(String str, int x, int y)在某些特定坐标处绘制字符串的方法，例如 (300, 300)。然而drawSt
我想使用Puppeteer从HTML字符串生成图像。现在我有这样的事情: const html = _.template(` Hello {{ test }}!
我正在创建一个游戏。我有一些带有文本的用户界面。最近我们想添加日语版本，但我遇到字体问题。我使用 stb_freetype 来光栅化字体，并且我支持 Unicode，所以这应该不是问题。但大多数字体似
我可以在一个文本区域中使用不同的前景色吗？不同的字体？ 我想添加类似“hh:mm:ss 昵称:消息”的内容，时间为灰色，名称 - 蓝色，消息 - 黑色。 最佳答案 我在评论中犯了一个错误:你想要的是
每次我更改字体时，它都会返回到默认大小，即 12，即使我之前使用“ Jade 野”菜单更改它，它每次也只会返回到 12，我的猜测是这样我使用deriveFont()更改大小，但现在没有其他方法可以更改
我的电脑上安装了一种名为“BMW1”的自定义字体。我试图循环遍历此字体中的所有条目并将它们显示在 JTextArea 中。 我有以下代码: JTextArea displayArea = new JT
我尝试通过 Squirrel 理解生成的代码，这里是输出: @font-face { font-family: 'someFont'; src: url('someFont.eot')
我知道有多种方法可以通过 JS/DHTML 动态更改网页的字体属性，或者用 Flash 呈现的字体(使用 sIFR 或 Cufon)替换文本。但是，我找不到任何根据用户选择动态更改网页上使用的字体的好
使用具有非标准样式名称(例如“Inline”或“Outline”)而不是标准样式(例如“Bold”和“Italic”)的字体系列，如何使用 css 选择字体的不同样式？ 设置 font-family
我对 html/css 有点陌生，我正在制作我的第一个网站，但我只是想不通一些东西。 首先，我在 dreaweaver 中工作...在 dreaweaver 中，一切看起来都不错，但是当我预览时，我缺
有没有办法在 Allegro5 中只绘制(或显示)图像/字体的一部分？ 例如，如果我有一个正方形 A 和一个图像 B，我只想绘制/显示 B 中与 A(在本例中为 C)重叠的部分，我该怎么做？ 插图:
所以，我有一个正在生成的报告 html 文件，其中有需要白色文本/字体的黑框。在通用 html 显示中一切都很好，但是当我尝试打印页面时，ctrl + p 或自定义打印功能，文本/字体保持为标准颜色，
我正在尝试制作一个非常适合 LaTeX 文档的 matlab 图形。一个已知的问题是 XTickLabel 和 YTickLabels 不使用 LaTeX 解释器渲染，导致图形不好看。 (注意:我意识
我需要在一个公共(public)位置使用默认颜色和字体，以便在桌面应用程序的多个窗口窗体中使用它。 这方面的最佳做法是什么？ 我正在考虑使用应用程序设置在那里定义它们，但我想确保这是推荐的方法或者是否
我是一名优秀的程序员,十分优秀！