Question

我有一个HTML页面，其中引用了css文件。

<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Limelight|Flamenco|Federo|Yesteryear|Josefin Sans|Spinnaker|Sansita One|Handlee|Droid Sans|Oswald:400,300,700" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/fontawesome.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/project.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/funny-positions.css" media="screen" rel="stylesheet" type="text/css" />

在stylesheets / funny-positions.css文件中，我有以下定义：

 .container .row-fluid .span12 .div-1 .page-header h1 {
   font-family:"handlee";
   font-weight: normal;
   font-size: 42px;
   color: #555555;
 }

如何通过html URL控制字体大小？换句话说，如何通过URL将参数传递给HTML并在css文件中读取这些参数？

类似于：http://www.mywebpage.com/index.html/?font-size=50

EDIT1

我不是网络开发人员所以我需要回答傻瓜＆＃34;。我不知道自从我使用＆＃34; html在线编辑器＆＃34;创建页面后我使用了哪种语言。（画架）。你可以在这里找到我的页面： http://www.insites-m.com/articals/funny_sex_positions/

我尝试了以下内容但它没有成功：

 .container .row-fluid .span12 .div-1 .page-header h1 {
   id:"myH1";
   font-family:"handlee";
   font-weight: normal;
   font-size: 42px;
   color: #555555;
 }

然后在html中：

    <html lang="en">
      <head>
        <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Limelight|Flamenco|Federo|Yesteryear|Josefin Sans|Spinnaker|Sansita One|Handlee|Droid Sans|Oswald:400,300,700" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/fontawesome.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/project.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/funny-sex-positions.css" media="screen" rel="stylesheet" type="text/css" />

    <script type="text/javascript">document.getElementById("myH1").style.fontSize=window.location.href.split("?")[1].replace("font-size=","")+"px";</script>
    <title>funny_sex_positions</title>
  </head>

  <body>
    <div class="container">
      <div class="row-fluid">
.....

感谢。

Answer 1

读取参数的JS代码怎么样呢，比如通过jQuery，将它应用到所需的类？

通过JS读取网址参数：Get current URL in web browser

然后你可以这样做：

$(your-selectors).css('font-size', your-font-size-variable );

Answer 2

首先，ID为你的h1（添加属性id="myH1"，你的h1现在看起来像<h1 id="myH1" ... >）

然后，在<head>：

中的任意位置使用此javascript

<script>
body.onload=function(){
document.getElementById("myH1").style.fontSize=window.location.href.split("?")[1].replace("font-size=","")+"px";
}
</script>

现在，您可以使用http://www.mywebpage.com/index.html/?font-size=50将字体大小设置为50像素。

将参数传递给HTML以控制字体大小

2 个答案: