如何使用javascript仅设置第一行文本的样式

Question

我希望能够设置仅在第一行的文本样式。可以说我有类似

的东西

public function actionFetchAreaList($id) {
    $this->layout = false;

    // ... preparing data

    return $this->renderAjax('area-list', [
        // ... some view data
    ]);
}

我只希望第一行和第一个类型的样式像使用text-transform大写一样。我知道有css psudocode可以做到这一点。

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

但我的教授希望看到它是使用javascript完成的。 任何人都可以帮我这个吗？

Answer 1

您可以在段落的第一行周围添加ID为“firstLine”的span标记...

<p>  <span id = "firstLine"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed </span> do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea </p>

然后在您的Javascript中，创建一个以span id为目标的变量（“doc”），然后您可以将新变量（“doc”）的css样式更改为大写。

var doc = document.getElementById("firstLine");
    doc.style.textTransform = "uppercase";

https://jsfiddle.net/koygwLLw/4/

希望这有帮助。